/* ==========================================================
   ClearFleet case study.
   ========================================================== */

.cfp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.cfp-section { padding: 100px 0; border-top: none; }

.cfp-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; }
.cfp-grid h2 { font: 700 2rem/1.15 var(--font-display); color: var(--text-primary); letter-spacing: -0.01em; }

/* Sticky only within the section that owns each marked heading. */
@media (min-width: 861px) {
  .cfp-section--sticky-title > .cfp-grid > h2 {
    position: sticky;
    top: 112px;
    align-self: start;
  }
}

.cfp-body p { color: var(--text-secondary); font: 500 17px/1.6 var(--font-body); max-width: 72ch; }
.cfp-body p + p { margin-top: 24px; }
.cfp-body b { font-weight: 700; color: var(--action-primary); }

/* ---------- Cover ---------- */
.cfp-cover { padding: 48px 0 100px; }
.cfp-cover + .cfp-section { padding-top: 0; }
.cfp-back { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--font-body); color: var(--text-primary); text-decoration: none; }
.cfp-back svg { width: 16px; height: 16px; }
.cfp-back:hover { opacity: .75; }

.cfp-cover-grid { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 56px; align-items: center; margin-top: 32px; }
.cfp-title { font: 800 40px/1 var(--font-display); color: var(--text-primary); letter-spacing: -0.02em; }
.cfp-tagline { margin-top: 22px; font: 700 22px/1.35 var(--font-display); color: var(--text-primary); letter-spacing: -0.005em; }
.cfp-tagline b { color: var(--action-primary); }
.cfp-sub { margin-top: 18px; font: 500 22px/1.35 var(--font-body); color: var(--text-primary); max-width: 46ch; }
.cfp-scroll { margin-top: 36px; display: inline-flex; align-items: center; gap: 9px; font: 600 22px/1 var(--font-body); color: var(--text-primary); }
.cfp-scroll svg { width: 26px; height: 26px; }

.cfp-hero { margin: 0; width: 600px; max-width: 100%; border-radius: 12px; overflow: hidden; aspect-ratio: 600 / 337; position: relative;
  background: none !important; background-image: none !important; display: block; padding: 0; box-shadow: none; }
.cfp-hero::before, .cfp-hero::after { content: none !important; display: none !important; }
.cfp-hero img { position: static; z-index: auto; max-width: none; max-height: none; width: 100%; height: 100%; aspect-ratio: 600 / 337; object-fit: cover; border-radius: 12px; box-shadow: none; display: block; background: none !important; background-image: none !important; }

/* ---------- Meta row ---------- */
.cfp-meta { margin-top: 100px; padding-top: 40px; border-top: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 25px; row-gap: 25px; }
.cfp-meta dt { font: 700 12px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--action-primary); margin-bottom: 10px; }
.cfp-meta dd { margin: 0; font: 600 17px/1.4 var(--font-display); color: var(--text-primary); }

/* ---------- Quote box ---------- */
.cfp-quote { margin-top: 24px; border: 1.5px solid var(--action-primary); border-radius: 18px; padding: 28px 32px; background: var(--bg-raised); max-width: 72ch; }
.cfp-quote p { margin: 0; }
.cfp-quote p + p { margin-top: 16px; }

/* ---------- Phases table ---------- */
.cfp-llm-note { margin: 0 0 25px !important; padding-top: 25px; }
.cfp-phases-label { display: block; margin-top: 0; font: 700 13px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--action-primary); }
.cfp-phases { margin-top: 16px; border: 1.5px solid var(--border-subtle); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--bg-raised); }
.cfp-phases div { padding: 20px 27px; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; min-height: 84px; }
.cfp-phases div:nth-child(3n) { border-right: none; }
.cfp-phases div:nth-last-child(-n+3) { border-bottom: none; }
.cfp-phases .n { display: block; color: var(--action-primary); font: 700 13px/1 var(--font-body); margin-bottom: 8px; }
.cfp-phases strong { font: 600 15px/1.4 var(--font-display); color: var(--text-primary); }

/* ---------- Final artifacts ---------- */
.cfp-sub-h3 { margin-top: 48px; font: 700 1.6rem/1.2 var(--font-display); color: var(--text-primary); }
.cfp-sub-h3 + p { margin-top: 12px; }

.cfp-browser { margin-top: 28px; background: var(--sand-200); border-radius: 24px; padding: 14px; }
.cfp-browser__bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; }
.cfp-browser__dots { display: flex; gap: 6px; flex: none; }
.cfp-browser__dots span { width: 10px; height: 10px; border-radius: 50%; display: block; }
.cfp-browser__dots span:nth-child(1) { background: #ED6A5E; }
.cfp-browser__dots span:nth-child(2) { background: #F4BF4F; }
.cfp-browser__dots span:nth-child(3) { background: #61C454; }
.cfp-browser__url { flex: 1; display: flex; justify-content: center; }
.cfp-browser__url span { background: var(--bg-raised); border-radius: 999px; padding: 6px 20px; font: 500 12px/1 var(--font-body); color: var(--text-secondary); }
.cfp-browser__win { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgb(0 0 0 / .12); }
.cfp-browser__win img { width: 100%; display: block; }

.cfp-screen-cap { margin-top: 18px; }
.cfp-screen-cap h4 { font: 700 1.25rem/1.3 var(--font-display); color: var(--text-primary); }
.cfp-screen-cap p { margin-top: 4px; color: var(--text-secondary); font: 500 15px/1.5 var(--font-body); }

.cfp-phones { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
.cfp-phone-block:last-child:nth-child(odd) { grid-column: 1; }
.cfp-phone { background: var(--sand-200); border-radius: 40px; padding: 14px; }
.cfp-phone img { width: 100%; display: block; border-radius: 28px; }
.cfp-phone__bar { height: 5px; width: 110px; background: var(--text-primary); border-radius: 99px; margin: 12px auto 0; opacity: .85; }
.cfp-phone-cap h4 { margin-top: 16px; font: 700 1.1rem/1.3 var(--font-display); color: var(--text-primary); }
.cfp-phone-cap p { margin-top: 4px; color: var(--text-secondary); font: 500 14px/1.5 var(--font-body); }

/* ---------- "One flow, fully alive" card ---------- */
.cfp-flow { margin-top: 40px; background: var(--bg-raised); border-radius: 28px; padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; box-shadow: var(--shadow-md, var(--shadow-sm)); }
.cfp-flow h2 { font: 800 clamp(1.8rem, 3.6vw, 2.3rem)/1.1 var(--font-display); color: var(--text-primary); letter-spacing: -0.015em; }
.cfp-flow-text p { margin-top: 18px; color: var(--text-secondary); font: 500 15px/1.6 var(--font-body); }
.cfp-flow-cta { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; background: var(--action-primary); color: #fff;
  font: 700 15px/1 var(--font-body); padding: 16px 26px; border-radius: 999px; text-decoration: none; transition: background-color .2s; }
.cfp-flow-cta:hover { background: var(--action-primary-hover); }
.cfp-flow-cta svg { width: 16px; height: 16px; }
.cfp-flow-note { margin-top: 12px; font: 500 13px/1 var(--font-body); color: var(--text-secondary); }

.cfp-steps { display: grid; gap: 14px; align-content: start; }
.cfp-step { display: flex; gap: 14px; align-items: flex-start; border: 1.5px solid var(--border-subtle); border-radius: 16px; padding: 16px 18px; background: var(--bg-page); }
.cfp-step__n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--action-primary); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-body); }
.cfp-step p { margin: 0; color: var(--text-secondary); font: 600 14px/1.5 var(--font-body); }

/* ---------- Key design moments ---------- */
.cfp-moment { margin-top: 44px; }
.cfp-moment:first-of-type { margin-top: 28px; }
.cfp-moment__tag { color: var(--action-primary); font: 700 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em; }
.cfp-moment h3 { margin-top: 10px; font: 700 1.5rem/1.25 var(--font-display); color: var(--text-primary); }
.cfp-moment p { margin-top: 16px; }

.cfp-pillrow { margin-top: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 700 12px/1 var(--font-body); letter-spacing: .02em; }
.cfp-pill { padding: 9px 16px; border-radius: 999px; background: var(--success-bg); color: var(--success-text); text-transform: uppercase; }
.cfp-pillrow .and { color: var(--text-primary); text-transform: none; font-weight: 600; }
.cfp-pillrow svg { width: 18px; height: 18px; color: var(--text-primary); }
.cfp-pillrow .result { color: var(--text-primary); font: 700 15px/1 var(--font-display); text-transform: none; }

.cfp-cards2 { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cfp-card { border-radius: 18px; padding: 22px 24px; border: 1.5px solid; }
.cfp-card--no { border-color: var(--danger-border); background: var(--bg-raised); }
.cfp-card--yes { border-color: var(--info-border); background: var(--info-bg); }
.cfp-card .tag { font: 700 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .03em; }
.cfp-card--no .tag { color: var(--danger-text); }
.cfp-card--yes .tag { color: var(--info-text); }
.cfp-card p { margin-top: 10px; font: 600 15px/1.5 var(--font-body); color: var(--text-secondary); }

/* ---------- Impact ---------- */
.cfp-targets { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cfp-target { background: var(--bg-raised); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-sm); }
.cfp-target .tag { color: var(--action-primary); font: 700 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .03em; }
.cfp-target b { display: block; margin-top: 14px; font: 800 clamp(1.9rem, 4vw, 2.5rem)/1 var(--font-display); color: var(--text-primary); }
.cfp-target span { display: block; margin-top: 10px; color: var(--text-secondary); font: 500 14px/1.4 var(--font-body); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .cfp-grid { grid-template-columns: 1fr; gap: 20px; }
  .cfp-cover-grid { grid-template-columns: 1fr; gap: 32px; }
  .cfp-hero { width: 600px; justify-self: center; }
  .cfp-meta { grid-template-columns: repeat(2, 1fr); }
  .cfp-phases { grid-template-columns: 1fr; }
  .cfp-phases div { border-right: none !important; border-bottom: 1px solid var(--border-subtle) !important; }
  .cfp-phases div:last-child { border-bottom: none !important; }
  .cfp-phones { grid-template-columns: 1fr; max-width: 360px; margin-top: 28px; margin-left: auto; margin-right: auto; }
  .cfp-flow { grid-template-columns: 1fr; }
  .cfp-cards2 { grid-template-columns: 1fr; }
  .cfp-targets { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cfp-meta { grid-template-columns: 1fr 1fr; }
}

/* Final spacing and shadow refinements */
.cfp-section#impact + .cfp-section { padding-top: 50px; }
.footer-wrap { margin-top: 50px; }


/* Preserve the original red/blue treatment for the two Key Design Moments cards. */
.cfp-cards2 .cfp-card--no {
  background: var(--danger-bg);
  border: 1.5px solid var(--danger-border);
}
.cfp-cards2 .cfp-card--yes {
  background: var(--info-bg);
  border: 1.5px solid var(--info-border);
}
.cfp-cards2 .cfp-card--no .tag { color: var(--danger-text); }
.cfp-cards2 .cfp-card--yes .tag { color: var(--info-text); }


/* Key Design Moments: use the exact requested pale red/blue fills and matching outlines. */
.cfp-section#moments .cfp-cards2 .cfp-card--no {
  background: #FEF2F2 !important;
  background-color: #FEF2F2 !important;
  border: 1.5px solid #DC2626 !important;
}
.cfp-section#moments .cfp-cards2 .cfp-card--no .tag {
  color: #DC2626 !important;
}
.cfp-section#moments .cfp-cards2 .cfp-card--yes {
  background: #EFF6FF !important;
  background-color: #EFF6FF !important;
  border: 1.5px solid #2563EB !important;
}
.cfp-section#moments .cfp-cards2 .cfp-card--yes .tag {
  color: #2563EB !important;
}

/* Remove the phone-frame effect from the five driver mobile screens only. */
.cfp-phone {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.cfp-phone img {
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
.cfp-phone__bar {
  display: none;
}


/* Remove browser-frame effects from the five desktop product screens only. */
.cfp-browser {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.cfp-browser__bar {
  display: none;
}
.cfp-browser__win {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.cfp-browser__win img {
  border-radius: 0;
  box-shadow: none;
  filter: none;
}


/* ---------- Final Artifacts horizontal desktop gallery ---------- */
@media (min-width: 861px) {
  #artifacts {
    overflow: clip;
  }
  .cfp-artifacts-intro {
    margin-bottom: 48px;
  }
  .cfp-artifact-group--desktop {
    position: relative;
    min-height: var(--cfp-artifact-scroll-height, 220vh);
  }
  .cfp-artifact-sticky-grid {
    position: sticky;
    top: 112px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .cfp-artifact-sticky-grid > h2,
  .cfp-artifact-states > h2,
  .cfp-artifact-mobile .cfp-grid > h2 {
    font: 700 2rem/1.15 var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    align-self: start;
  }
  .cfp-artifact-viewport {
    overflow: hidden;
    min-width: 0;
  }
  .cfp-artifact-track {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: max-content;
    will-change: transform;
    transform: translate3d(0,0,0);
  }
  .cfp-artifact-card {
    flex: 0 0 min(75%, 560px);
    width: min(75%, 560px);
    min-width: 0;
  }
  .cfp-artifact-card .cfp-browser {
    margin-top: 0;
  }
  .cfp-artifact-card .cfp-screen-cap {
    margin-top: 18px;
  }
  .cfp-artifact-states {
    margin-top: 64px;
  }
}
@media (max-width: 860px) {
  .cfp-artifact-group--desktop {
    min-height: 0 !important;
  }
  .cfp-artifact-sticky-grid {
    display: block;
  }
  .cfp-artifact-viewport {
    overflow: visible;
  }
  .cfp-artifact-track {
    display: block;
    width: auto;
    transform: none !important;
  }
  .cfp-artifact-card {
    width: 100%;
    min-width: 0;
    margin-top: 28px;
  }
  .cfp-artifact-mobile {
    margin-top: 48px;
  }
  .cfp-artifact-states {
    margin-top: 48px;
  }
}


/* ---------- Final Artifacts horizontal desktop gallery ---------- */
@media (min-width: 861px) {
  #artifacts { overflow: clip; }
  .cfp-artifacts-intro { margin-bottom: 48px; }
  .cfp-artifact-group--desktop { position: relative; min-height: 0; }
  .cfp-artifact-sticky-grid {
    position: sticky;
    top: 112px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .cfp-artifact-sticky-grid > h2,
  .cfp-artifact-states > h2,
  .cfp-artifact-mobile .cfp-grid > h2 {
    font: 700 2rem/1.15 var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    align-self: start;
  }
  .cfp-artifact-viewport { overflow: hidden; min-width: 0; }
  .cfp-artifact-track {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: max-content;
    will-change: transform;
    transform: translate3d(0,0,0);
  }
  .cfp-artifact-card {
    flex: 0 0 clamp(300px, calc((100vw - 452px) * 0.75), 560px);
    width: clamp(300px, calc((100vw - 452px) * 0.75), 560px);
    min-width: 0;
  }
  .cfp-artifact-card .cfp-browser { margin-top: 0; }
  .cfp-artifact-card .cfp-screen-cap { margin-top: 18px; }
  .cfp-artifact-states { margin-top: 64px; }
}
@media (max-width: 860px) {
  .cfp-artifact-group--desktop { min-height: 0 !important; height: auto !important; }
  .cfp-artifact-sticky-grid { position: static; display: block; }
  .cfp-artifact-viewport { overflow: visible; }
  .cfp-artifact-track { display: block; width: auto; transform: none !important; }
  .cfp-artifact-card { width: 100%; min-width: 0; margin-top: 28px; }
  .cfp-artifact-mobile { margin-top: 48px; }
  .cfp-artifact-states { margin-top: 48px; }
}


/* Final desktop reset: keep Final Artifacts static (no horizontal-scroll gallery).
   This is desktop-only; mobile/tablet rules above remain untouched. */
@media (min-width: 861px) {
  #artifacts { overflow: visible !important; }
  .cfp-artifact-group--desktop {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }
  .cfp-artifact-sticky-grid {
    position: static !important;
    display: block !important;
    top: auto !important;
  }
  .cfp-artifact-viewport { overflow: visible !important; }
  .cfp-artifact-track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 48px 32px !important;
    width: 100% !important;
    transform: none !important;
    will-change: auto !important;
  }
  .cfp-artifact-card {
    width: 100% !important;
    min-width: 0 !important;
    flex: initial !important;
  }
  .cfp-artifact-card .cfp-browser__win img {
    width: 100%;
    height: auto;
  }
  .cfp-artifact-mobile { margin-top: 72px; }
  .cfp-artifact-mobile .cfp-grid {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
  }
  .cfp-artifact-mobile .cfp-phones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
    max-width: 720px;
    margin-top: 28px;
  }
  .cfp-artifact-mobile .cfp-phone-block,
  .cfp-artifact-mobile .cfp-phone-block:last-child:nth-child(odd) {
    grid-column: auto;
    min-width: 0;
  }
  .cfp-artifact-mobile .cfp-phone img { width: 100%; height: auto; }
}