/* Launch switches — see README-DEPLOY.md
   <body data-casestudy="awaiting-dinesh">  the VOLTe case study is shown with a "To be approved by Dinesh" tag.
     Once Dinesh approves, set it to "approved" and the tag disappears.
   <body data-chat="pending">  hides "Prefer to chat?" until the LINE and WhatsApp links are filled in. Set to "live" to show it.
   Dinesh's quote band under the hero is always shown. */
body[data-casestudy="approved"] .approval-tag{display:none!important}
body[data-chat="pending"] .chat-line,body[data-chat="pending"] .chat-links{display:none!important}

/* ---- Batch 1 (2 Nov 2026) ---- */
.brief-hero h1{font-size:clamp(38px,4.4vw,62px);letter-spacing:-2px;line-height:1.06;max-width:980px;margin-left:auto;margin-right:auto}
.eyebrow{text-transform:none;letter-spacing:.2px;font-size:15px;font-weight:700;color:#EC008C}
.intro-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 26px}
.intro-tiles div{border-top:2px solid #EC008C;padding:12px 0 4px}
.intro-tiles b{display:block;color:#fff;font-size:17px;font-weight:700;margin-bottom:6px}
.intro-tiles span{display:block;color:#b9c5d8;font-size:14px;line-height:1.5}
.brief-split .intro-close{color:#fff!important;font-size:18px;font-weight:700;margin:0 0 22px}
@media (max-width:700px){.intro-tiles{grid-template-columns:1fr}}

/* ---- Batch 2 (10 Nov 2026): one type scale, tighter spacing, consistent grid ---- */
/* 28: let the photo breathe on the right */
.photo-cover:before{background:linear-gradient(90deg,#0B1930e6 0%,#0B1930a8 36%,#0B193022 64%,#0B193000 85%)!important}
/* 18: type scale */
#main .brief-hero h1{font-size:clamp(38px,4.4vw,62px);letter-spacing:-2px;line-height:1.06}
#main h2{font-size:clamp(34px,3.6vw,52px);letter-spacing:-1.6px;line-height:1.06;margin:0 0 24px}
#main .feature-copy h3{font-size:clamp(28px,2.6vw,38px);letter-spacing:-1px;line-height:1.1;margin:0 0 22px}
#main .audience-grid h3{font-size:24px;letter-spacing:-.6px;line-height:1.2}
#main .body-copy,#main .system-heading>p:last-child,#main .about-heading>p,#main .case-lede{font-size:18px;line-height:1.6}
#main .metric{font-size:clamp(64px,6vw,88px);letter-spacing:-3px;line-height:1}
#main .metric-caption{font-size:16px;margin:10px 0 20px}
/* 19: pink section titles are proper headings */
#main .eyebrow{font-size:23px;font-weight:700;letter-spacing:-.3px;line-height:1.2;text-transform:none;margin:0 0 14px;color:#EC008C}
/* 23: tighter, consistent spacing (~20% less) */
@media (min-width:901px){
 #main .feature{padding:66px 7%!important;gap:7%!important;grid-template-columns:1fr 1.15fr}
 #main .feature .feature-copy{order:0!important}
 #main .feature .shot,#main .feature .product-image{order:1!important}
 #main .system-heading{padding:88px 7% 54px!important}
 #main .brief-split{padding:76px 7%!important}
 #main .case-study,#main .audiences,#main .about-karzo,#main .faq,#main .demo-prep{padding-top:76px!important;padding-bottom:76px!important}
 #main .group-offices{padding:64px 7% 50px!important}
}
/* 26: close-up screenshot cards */
#main .shot-card{display:block;width:100%;padding:0!important;border:1px solid #dfe3ea;border-radius:12px;overflow:hidden;background:#fff!important;box-shadow:0 18px 40px #0B19301a;cursor:zoom-in}
#main .shot-card img{display:block;width:100%;height:auto}
/* 24: slim proof strip under the hero */
.proof-strip{display:flex;align-items:center;gap:20px;padding:18px 7%;background:#F4F5F7;border-bottom:1px solid #e1e5ec;flex-wrap:wrap}
.proof-strip img{height:34px;width:auto}
.proof-strip p{margin:0;font-size:16px;color:#0B1930;flex:1;min-width:240px}
.proof-strip a{font-size:15px;font-weight:700;color:#EC008C;text-decoration:none;white-space:nowrap}
.case-quote{margin:30px 0 0;border-left:3px solid #EC008C;padding-left:20px}
.case-quote p{font-size:20px;line-height:1.5;margin:0 0 12px}
.case-quote footer{display:flex;flex-direction:column;gap:3px;font-size:14px;border:0;padding:0;color:#c3ccdd}
.case-quote footer b{color:#fff}
/* 20: placeholder keeps card headings aligned where there is no metric */
/* 27: demo preparation steps */
.demo-prep{padding:60px 7%;background:#F4F5F7}
.prep-steps{list-style:none;counter-reset:prep;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prep-steps li{counter-increment:prep;background:#fff;border-top:3px solid #EC008C;padding:22px 20px}
.prep-steps li:before{content:counter(prep);display:block;font-size:15px;font-weight:700;color:#EC008C;margin-bottom:8px}
.prep-steps b{display:block;font-size:19px;margin-bottom:8px;color:#0B1930}
.prep-steps p{margin:0;font-size:15px;line-height:1.6;color:#4a5568}
@media (max-width:900px){.prep-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.prep-steps{grid-template-columns:1fr}}

.case-quote footer{align-items:flex-start!important;text-align:left!important}
.case-quote p{font-weight:400!important;text-align:left}