/* =====================================================================
   FunnelX — Customer success story page
   Loaded after homepage.css. Owns the case study layout only.
   ===================================================================== */
.cs-hero { position: relative; overflow: hidden; background: var(--fx-navy); padding: 172px 0 var(--space-16); }
.cs-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 56% at 10% 2%, rgba(50,101,255,0.58), transparent 62%), radial-gradient(42% 52% at 92% 88%, rgba(3,197,147,0.20), transparent 66%); }
.cs-hero .wrap { position: relative; z-index: 1; }
@media (max-width: 900px){ .cs-hero { padding: 124px 0 var(--space-12); } }
.cs-hero .eyebrow { color: var(--fx-yellow); }
.cs-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.025em; margin: var(--space-4) 0 var(--space-5); max-width: 20ch; }
.cs-lead { color: #fff; font-size: var(--fs-18); line-height: var(--lh-relaxed); margin: 0; max-width: 62ch; opacity: 0.9; }
.cs-tag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; opacity: 0.7; margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.16); }
.cs-tag .bar { width: 1px; height: 12px; background: rgba(255,255,255,0.3); }


.cs-sec { padding: var(--space-20) 0; }
.cs-sec.alt { background: var(--bg-subtle); }
.cs-kicker { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-blue); margin: 0 0 var(--space-4); }
.cs-sec h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--fx-navy); margin: 0 0 var(--space-8); max-width: 26ch; }
.cs-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: var(--space-12); align-items: start; }
@media (max-width: 900px){ .cs-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.cs-body p { font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0 0 var(--space-5); max-width: 62ch; }
.cs-body p:last-child { margin-bottom: 0; }
.cs-aside { border: 1px solid var(--border-1); border-radius: var(--radius-xl); background: #fff; padding: var(--space-7); box-shadow: var(--shadow-xs); }
.cs-sec.alt .cs-aside { background: #fff; }
.cs-aside h3 { font-size: var(--fs-16); color: var(--fx-navy); margin: 0 0 var(--space-3); }
.cs-aside p { font-size: var(--fs-14); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0 0 var(--space-4); }
.cs-aside p:last-child { margin-bottom: 0; }
.cs-aside a { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--fx-light-blue); text-decoration: none; }
.cs-aside a:hover { color: var(--fx-blue); }

.cs-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin: 0 0 var(--space-10); }
@media (max-width: 760px){ .cs-points { grid-template-columns: 1fr; } }
.cs-point { border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: #fff; padding: var(--space-6); font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--fx-navy); display: flex; gap: 14px; align-items: flex-start; }
.cs-point i { flex: none; width: 20px; height: 20px; border-radius: 6px; background: rgba(50,101,255,0.12); margin-top: 2px; position: relative; }
.cs-point i::after { content: ""; position: absolute; left: 7px; top: 6px; width: 6px; height: 6px; border: solid var(--fx-light-blue); border-width: 2px 2px 0 0; transform: rotate(45deg); }

.cs-quote { background: var(--fx-navy); border-radius: var(--radius-2xl); padding: var(--space-10); position: relative; overflow: hidden; }
.cs-quote::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(44% 60% at 88% 8%, rgba(50,101,255,0.5), transparent 62%), radial-gradient(36% 50% at 6% 94%, rgba(3,197,147,0.24), transparent 64%); }
.cs-quote > * { position: relative; z-index: 1; }
.cs-quote blockquote { margin: 0 0 var(--space-6); font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.42; color: #fff; letter-spacing: -0.01em; }
.cs-quote .who { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cs-quote .who .av { width: 46px; height: 46px; border-radius: 999px; background: rgba(255,255,255,0.14); color: #fff; display: grid; place-items: center; font-size: var(--fs-14); font-weight: var(--fw-semibold); flex: none; }
.cs-quote .who b { display: block; color: #fff; font-size: var(--fs-15, 15px); }
.cs-quote .who small { font-size: 13px; color: #fff; opacity: 0.72; }

.cs-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 760px){ .cs-steps { grid-template-columns: 1fr; } }
.cs-step { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-xl); padding: var(--space-8); }
.cs-step .n { display: block; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.1em; color: var(--fx-light-blue); margin-bottom: var(--space-4); }
.cs-step h3 { font-size: var(--fs-18); color: var(--fx-navy); line-height: var(--lh-snug); margin: 0 0 8px; }
.cs-step p { font-size: var(--fs-15, 15px); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; }

.cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin: var(--space-10) 0 0; }
@media (max-width: 760px){ .cs-stats { grid-template-columns: 1fr; } }
.cs-stat { border: 1px solid var(--border-1); border-radius: var(--radius-xl); background: #fff; padding: var(--space-8); }
.cs-stat .n { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.03em; color: var(--fx-navy); }
.cs-stat .c { margin-top: 10px; font-size: var(--fs-15, 15px); line-height: var(--lh-relaxed); color: var(--fg-2); }
.cs-ctarow { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--space-10); }

/* photos */
.cs-aside-img { width: 100%; border-radius: var(--radius-lg); margin: 0 0 var(--space-5); display: block; }
.cs-fig { margin: 0 0 var(--space-10); }
.cs-fig img { width: 100%; max-width: 760px; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); display: block; }
.cs-fig figcaption { margin-top: var(--space-4); font-size: var(--fs-14); color: var(--fg-2); line-height: var(--lh-relaxed); max-width: 60ch; }
.cs-quote .who .av-img { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex: none; border: 2px solid rgba(255,255,255,0.25); }
.cs-logo { border: 1px dashed rgba(255,255,255,0.45); border-radius: var(--radius-pill); padding: 4px 12px; letter-spacing: 0.06em; color: var(--fx-yellow); }

/* ---------- Hero v2: split layout, undistorted photo ---------- */
.cs-hero { padding: 168px 0 var(--space-20); }
@media (max-width: 900px){ .cs-hero { padding: 124px 0 var(--space-14); } }
.cs-hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: var(--space-14); align-items: center; }
@media (max-width: 960px){ .cs-hero-grid { grid-template-columns: 1fr; gap: var(--space-10); } }
.cs-hero-copy h1 { max-width: 19ch; }
.cs-hero-copy .cs-lead { max-width: 48ch; }
.cs-hero-fig { margin: 0; }
.cs-hero-fig img { width: 100%; height: auto; display: block; border-radius: var(--radius-xl); box-shadow: 0 28px 60px rgba(0,0,0,0.38); }
.cs-hero-fig figcaption { margin-top: var(--space-4); font-size: 12px; letter-spacing: 0.04em; color: #fff; opacity: 0.6; }
/* keep every case study photo undistorted */
.cs-aside-img, .cs-fig img, .cs-hero-fig img { object-fit: cover; }

/* every photo derives its own height, so nothing stretches or crops unintentionally */
.cs-fig img, .cs-aside-img, .cs-hero-fig img { height: auto; }

/* ---------- Intro + horizontal bands (replaces the narrow aside) ---------- */
.cs-intro { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10); margin: 0 0 var(--space-12); }
@media (max-width: 820px){ .cs-intro { grid-template-columns: 1fr; gap: var(--space-5); } }
.cs-intro p { font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; max-width: 52ch; }
.cs-intro:has(p:only-child) { grid-template-columns: 1fr; }
.cs-intro:has(p:only-child) p { max-width: 74ch; font-size: var(--fs-20); }
.cs-band { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; align-items: stretch; border: 1px solid var(--border-1); border-radius: var(--radius-2xl); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
@media (max-width: 820px){ .cs-band { grid-template-columns: 1fr; } }
.cs-band.flip > img { order: 2; }
@media (max-width: 820px){ .cs-band.flip > img { order: 0; } }
.cs-band > img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 260px; }
.cs-band-txt { padding: var(--space-9, 40px) var(--space-10); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }
.cs-band-txt h3 { font-size: var(--fs-20); color: var(--fx-navy); margin: 0; letter-spacing: -0.01em; }
.cs-band-txt p { font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; max-width: 56ch; }
.cs-band-txt a { font-size: var(--fs-15, 15px); font-weight: var(--fw-semibold); color: var(--fx-blue); text-decoration: none; margin-top: var(--space-2); }
.cs-band-txt a:hover { text-decoration: underline; }

.cs-logo { display: inline-flex; align-items: center; gap: 10px; border: 0; padding: 0; color: #fff; letter-spacing: 0.12em; }
.cs-logo-slot { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px dashed rgba(255,255,255,0.45); font-size: 8px; letter-spacing: 0.06em; color: var(--fx-yellow); }

.cs-dl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: var(--space-8); }
.cs-dl-note { font-size: 12.5px; color: #fff; opacity: 0.6; letter-spacing: 0.03em; }

.cs-logo-img { height: 34px; width: auto; display: block; }
@media (max-width: 620px){ .cs-logo-img { height: 28px; } }

.cs-hero-copy .cs-tag { margin: 0 0 var(--space-6); padding: 0 0 var(--space-6); border-top: 0; border-bottom: 1px solid rgba(255,255,255,0.16); }
.cs-logo-img { height: 30px; width: auto; display: block; }
.cs-hero-copy .eyebrow { display: block; }
.cs-dl { margin-top: var(--space-8); }