/* Case study pages (/case-studies/doppler, /case-studies/kienesberger), Figma layout.
   Extends webflow.css, page.css and seg-common.css. Prefixes: csd- (Figma sections), cs- (similar situation band) */
:root{
  --cs-navy:#181E35;
  --cs-green:#08A270;
  --cs-green-ink:#087a55;
  --cs-green-tint:#e8faf3;
  --cs-slate:#596780;
  --cs-body:#535461;
  --cs-line:#dfe4ea;
  --cs-red:#b4382c;
  --cs-red-tint:#fcecea;
  --cs-mono:"Red Hat Mono",ui-monospace,Consolas,monospace;
  --cs-head:var(--_typography---font--heading);
}

/* Similar situation */
.cs-next{padding-top:3rem;padding-bottom:3rem}
.cs-next_row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem 3rem;flex-wrap:wrap;max-width:76rem;margin:0 auto}
.cs-next_text{margin:0;font-family:var(--cs-head);font-size:clamp(1.25rem,2vw,1.625rem);font-weight:600;line-height:1.3;color:var(--cs-navy)}
.cs-next_link{font-size:1.0625rem}
@media (max-width:767px){.cs-next_row{flex-direction:column;align-items:flex-start}}

/* Figma layout (B2Bware screendesign 2026, Doppler 877:15035, Kienesberger 877:15831). Prefix: csd-
   Sizes follow the Figma frame at 1600px content width; cards over photos scale with their box (cqi). */
.csd-hero{padding:5.6rem 0}
.csd-hero .heading-h1{font-size:clamp(2.375rem,4.2vw,3.75rem);line-height:1.12;letter-spacing:-.01em}
.csd-eyebrow{margin:0 0 .25rem;font-family:var(--cs-head);font-size:1.4375rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--cs-navy)}
.csd-hero .sol-hero_copy{gap:1.75rem}
.csd-hero .button.is-white{border-color:#fff}
.csd-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem}
.csd-ticks>li{display:flex;align-items:flex-start;gap:.625rem;font-size:1.125rem;line-height:1.6;color:#191a15}
.csd-ticks.is-dark>li{color:var(--cs-navy);align-items:center}
.csd-ticks img{flex:none;width:22px;height:22px;margin-top:.2rem}
.csd-ticks.is-dark img{margin-top:0}
.csd-ticks strong{font-weight:600;color:var(--cs-navy)}

/* Hero cards: product card 1018:3953 and customer picker 1018:3972 */
.csd-hero .sol-hero_visual{justify-content:flex-end}
.csd-cards{position:relative;flex:none;width:421px;height:348px;margin-right:6%}
.csd-card{position:absolute;background:rgba(255,255,255,.92);backdrop-filter:blur(7px);border-radius:10px;box-shadow:0 6px 20px rgba(23,31,54,.1);overflow:hidden;font-family:var(--_typography---font--body)}
.csd-card p{margin:0}
.csd-product{left:0;top:0;width:62.9%;padding:12px 12px 16px 14px}
.csd-product_media{position:relative;height:220px;overflow:hidden}
.csd-product_img{position:absolute;left:-20px;top:-44px;width:277px;max-width:none;height:auto;mix-blend-mode:multiply}
.csd-product_wish{position:absolute;right:1px;top:2px;width:14px;height:14px}
.csd-product_name{padding-top:8px;font-size:11px;font-weight:600;line-height:16px;letter-spacing:.02em;color:#1f1f1f}
.csd-product_cat{padding:14px 0 6px;font-size:9.5px;line-height:14px;color:#8a8a8a}
.csd-product_swatches{display:flex;gap:4px;align-items:center}
.csd-product_swatches span{width:17px;height:10px;border-radius:2px}
.csd-product_swatches .is-more{width:auto;padding:0 4px;background:#f2f2f2;font-size:8px;line-height:10px;color:#555}
.csd-product_price{padding-top:8px;font-size:17px;line-height:24px;color:#2e2e2e}
.csd-picker{left:55.3%;top:26.4%;width:44.7%;padding:12px 10px;display:flex;flex-direction:column;gap:9px}
.csd-picker_head{display:flex;align-items:center;gap:7px;padding-left:4px;font-size:10.5px;font-weight:500;line-height:15px;color:#27304a}
.csd-picker_search{display:flex;align-items:center;gap:6px;padding:5px 8px;background:#fff;border:1px solid #d6dae2;border-radius:5px;font-size:8px;line-height:12px;color:#8c93a3}
.csd-picker_list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.csd-picker_list li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:5px}
.csd-picker_list li.is-on{background:#e9edfa}
.csd-picker_list span{flex:1;min-width:0;display:flex;flex-direction:column;white-space:nowrap}
.csd-picker_list b{font-weight:400;font-size:8.5px;line-height:12px;color:#27304a}
.csd-picker_list small{font-size:6.5px;line-height:10px;color:#8c93a3}

/* Shared two-column block: text left, photo or profile right */
.csd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,580px);gap:4rem;align-items:center}
.csd-split.is-top{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.csd-split_text{display:flex;flex-direction:column;align-items:flex-start;gap:1.75rem;min-width:0;max-width:51rem}
.csd-split_text .text-lead{max-width:49rem}
.csd-split_text .button{margin-top:.5rem}
.csd-split_text .text-lead+.text-lead{margin-top:-.75rem}
.csd-intro{font-weight:500}

/* Challenge: logo and client profile, four tinted cards */
.csd-profile{min-width:0;max-width:43rem}
.csd-profile_logo{display:block;width:auto;max-width:100%;height:68px;margin-bottom:1.75rem}
.csd-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 2rem}
.csd-facts dt{margin:0 0 .2rem;font-size:.875rem;font-weight:600;color:var(--cs-slate)}
.csd-facts dd{margin:0;font-size:1.125rem;line-height:1.6;color:#011737}
.csd-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4375rem}
.csd-problems{margin-top:5rem}
.csd-box{min-width:0;background:#fff;border-radius:10px;padding:1.8rem 1.8rem 2.25rem}
.csd-box.is-red{background:#f8eded}
.csd-box_icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin-bottom:1.25rem;border-radius:10px;background:#fff}
.csd-box_icon.is-green{background:#f2faf6}
.csd-box_icon img{display:block;width:auto;height:auto}
.csd-box .heading-h3{margin:0 0 .8rem;color:#011737;line-height:1.3}
.csd-box p{margin:0;font-size:1.125rem;line-height:1.6;color:#011737}

/* What we built: photo with the before and after cards (Figma 877:15631) */
.csd-photo{position:relative;min-width:0;width:100%;aspect-ratio:580 / 503;border-radius:10px}
.csd-photo_img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;background:#d8d8d8}
.csd-ba{position:absolute;width:33.6%;aspect-ratio:195 / 294;background:#fff;border-radius:10px;box-shadow:0 1.2px 1.2px rgba(0,0,0,.15);container-type:inline-size}
.csd-ba.is-before{left:12.9%;top:24.7%}
.csd-ba.is-after{left:53.4%;top:16.7%}
.csd-ba_title{position:absolute;left:0;right:0;margin:0;text-align:center;font-family:var(--cs-head);font-weight:700;line-height:1.2;color:#011737}
.csd-ba.is-before .csd-ba_title{top:7.6cqi;font-size:7.25cqi}
.csd-ba.is-after .csd-ba_title{top:6.5cqi;font-size:10.25cqi}
.csd-ba>img{position:absolute;left:5.7%;width:88.7%;height:auto}
.csd-ba.is-before>img{top:19.5%}
.csd-ba.is-after>img{left:5%;top:13.2%}
.csd-ba_bar{position:absolute;left:14%;top:43.5%;width:71.7%;height:16.4cqi;display:flex;align-items:center;justify-content:center;background:var(--cs-navy);border-radius:5px 5px 0 0}
.csd-ba_bar img{width:41.5cqi;height:auto}
.csd-sub{margin:7.5rem 0 2.5rem}
.csd-bullets{margin:0;padding-left:1.7rem;font-size:1.125rem;line-height:1.6;color:#011737}
.csd-bullets li+li{margin-top:.15rem}

/* Results: navy band, white cards */
.csd-results{padding:5rem 0}
.csd-results_title{margin:0 0 3rem;text-align:center}
.csd-results_grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4375rem;margin:0}
.csd-results_item{min-width:0;background:#fff;border-radius:10px;padding:3rem 2.5rem;text-align:center}
.csd-results_item dt,.csd-results_item dd{margin:0}
.csd-results_fig{font-family:var(--cs-head);font-size:3.125rem;font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--cs-green)}
.csd-results_label{margin-top:.6rem!important;font-family:var(--cs-head);font-size:1.4375rem;font-weight:700;line-height:1.3;color:#011737}
.csd-results_note{max-width:16rem;margin:.5rem auto 0!important;font-size:1.125rem;line-height:1.6;color:#011737}
.csd-results_source{margin:2.5rem 0 0;text-align:center;font-size:.875rem;color:#9aa5c2}

/* Day to day: photo with the dashboard and analytics cards (Figma 1002:4086, 1002:4112) */
.csd-daily .csd-split_text{gap:1.5rem}
.csd-panel{position:absolute;width:33.8%;aspect-ratio:196 / 239;background:#fefefe;border-radius:6px 6px 0 0;overflow:hidden;container-type:inline-size;font-family:var(--_typography---font--body);color:var(--cs-navy)}
.csd-panel.is-dash{left:12.8%;top:30.2%}
.csd-panel.is-chart{left:53.4%;top:22.3%}
.csd-panel p{margin:0}
.csd-panel_head{height:18.7cqi;display:flex;align-items:center;padding:0 5.4cqi;background:var(--cs-navy);color:#fff!important;font-size:5.7cqi;font-weight:600}
.csd-panel_body{position:relative;padding:7.6cqi 7.6cqi 0;font-size:6.4cqi;line-height:1.2}
.csd-panel_big{font-size:15.2cqi;font-weight:600;line-height:1}
.csd-panel_mid{font-size:9.8cqi;line-height:1.1}
.csd-panel_small{font-size:5.7cqi}
.csd-panel_icon{position:absolute;right:7cqi;top:4cqi;width:23cqi;height:auto}
.csd-panel hr{margin:6cqi 0 5cqi;border:0;border-top:1px solid #181e35;opacity:.6}
.csd-panel ul{list-style:none;margin:3.5cqi 0 0;padding:0;display:flex;flex-direction:column;gap:3.6cqi}
.csd-panel li{display:flex;align-items:center;gap:3cqi}
.csd-panel li img{width:7cqi;height:7cqi}
.csd-panel_chart{display:block;width:88%;height:auto;margin:0 auto}
.csd-panel.is-chart hr{margin-top:5.5cqi}

/* Three-card rows (Kienesberger) */
.csd-grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Kienesberger story visual: product list card over the photo's left edge (Figma 1007:3953). Sizes in cqi of the 286px card */
.csd-plist{position:absolute;left:-9.5%;top:18.3%;width:49.3%;background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 6px 20px rgba(24,30,53,.12);container-type:inline-size;font-family:var(--_typography---font--body);color:var(--cs-navy)}
.csd-plist p{margin:0}
.csd-plist_head{height:14cqi;display:flex;align-items:center;padding-left:4.9cqi;background:var(--cs-navy)}
.csd-plist_head img{width:28.3cqi;height:auto}
.csd-plist_row{display:flex;align-items:center;gap:3.5cqi;padding:1.4cqi 2.8cqi 1.4cqi 1.4cqi;border-bottom:1px solid #e6e6e6}
.csd-plist_row:last-child{border-bottom:0}
.csd-plist_thumb{flex:none;width:38.5cqi;height:29.4cqi;object-fit:cover;border-radius:3px;background:#f3f4f6}
.csd-plist_info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1cqi;white-space:nowrap}
.csd-plist_name{font-size:2.62cqi;font-weight:600;line-height:1.45}
.csd-plist_price{font-size:2.97cqi;font-weight:600;line-height:1.4}
.csd-plist dl{margin:0;padding-top:.7cqi;display:flex;flex-direction:column;gap:.35cqi;font-size:2.1cqi;line-height:1.65}
.csd-plist dl div{display:flex}
.csd-plist dt{width:21.7cqi;margin:0;font-weight:400}
.csd-plist dd{margin:0}
.csd-plist_usage{font-size:2.1cqi;line-height:1.65}

/* Why choose: same visual as the homepage */
.csd-why .section_header{margin-bottom:2rem}
.csd-why+.cs-next{background:#fff}

/* FAQ at the end, as in the Figma frame (same look as the homepage FAQ) */
#v2-faq.section{background:#fff}
#v2-faq .faq-list{gap:.625rem}
#v2-faq .faq-item{background:#f4f7fa;border:0;box-shadow:none;border-radius:8px}
#v2-faq .faq-item_icon{width:16px;height:16px}
#v2-faq .faq-item_icon::before,#v2-faq .faq-item_icon::after{width:16px;height:2.5px;top:6.75px;background:#181e35;border-radius:2px}

@media (max-width:1279px){
  .csd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  .csd-split{gap:3rem}
}
@media (max-width:991px){
  .csd-hero{padding:3rem 0}
  .csd-hero .sol-hero_visual{justify-content:flex-start}
  .csd-cards{margin-right:0}
  .csd-split,.csd-split.is-top{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .csd-photo{max-width:580px}
  .csd-plist{left:-3%}
  .csd-grid.is-3{grid-template-columns:minmax(0,1fr)}
  .csd-problems{margin-top:3rem}
  .csd-sub{margin-top:4.5rem}
  .csd-results_grid{grid-template-columns:minmax(0,1fr);gap:1.25rem;max-width:30rem;margin:0 auto}
}
@media (max-width:767px){
  .csd-eyebrow{font-size:1.125rem}
  .csd-ticks>li,.csd-box p,.csd-bullets,.csd-facts dd{font-size:1rem}
  .csd-grid{grid-template-columns:minmax(0,1fr)}
  .csd-box{padding:1.5rem}
  .csd-results_item{padding:2rem 1.5rem}
  .csd-results_fig{font-size:2.5rem}
  .csd-sub{margin:3.5rem 0 1.75rem}
  .csd-split_text .button{width:100%;box-sizing:border-box;text-align:center}
}
@media (max-width:767px){.csd-why .section_header{text-align:left;align-items:flex-start}
  /* Logo strip: same phone layout as the homepage */
  .logo-bar_inner{align-items:center}.logo-bar_title{text-align:center;max-width:18rem;font-size:1.125rem}.logo-marquee{width:calc(100% + 2.5rem);margin:0 -1.25rem}}
@media (max-width:479px){
  .csd-facts{grid-template-columns:minmax(0,1fr)}
  .csd-cards{zoom:.8}
}
@media (max-width:374px){.csd-cards{zoom:.68}}