/* ============================================================
   ClickSambo — Customer stories list page
   (/customer-story, /tr/musteri-hikayeleri, /pt-br/historia-de-cliente)
   Scoped to <main class="csPage">: header, footer and other pages are untouched.
   Every rule is prefixed with .csPage and every class carries the cs prefix, so the site-wide
   classes in layout.css (.btn, .hero, .card, .list, ...) cannot collide and the relative
   specificity of element vs. class rules matches the approved designs. The three language
   designs share the same markup and styles. .csIsHidden is toggled by the search script, .csHasLive
   is removed by a cover photo's onerror handler.
   The design's own nav, footer, chat button and dark-mode tokens are replaced by the site's.
   ============================================================ */
/* layout.css resets margins/paddings of most elements, sets `*{font-family:Mulish}`,
   `b,strong{font-weight:700}`, `ol,ul{list-style:none}` and styles every blockquote; restore the
   browser defaults the design relies on. :where() keeps these at element specificity, so every
   design rule below still wins exactly as in the design. */
.csPage *{font-family:inherit}
:where(.csPage) :where(p,ul,ol){margin:1em 0}
:where(.csPage) :where(ul,ol){padding-left:40px}
:where(.csPage) h2{margin:.83em 0}
:where(.csPage) h3{margin:1em 0}
:where(.csPage) b,:where(.csPage) strong{font-weight:bolder}
.csPage{--font-brand:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif;
  --navy:#1C2841; --deep:#1C2841;
  --orange:#F94C10; --orange-d:#D93D08; --orange-l:#FF7A47; --orange-soft:rgba(249,76,16,.1);
  --green:#22B573; --green-d:#17835A;
  --cream:#FFF1E9; --cream-2:#FDF6F1; --cream-d:#EFDCD1; --white:#fff;
  --line:#ECECF3; --line-2:#F0E2D8; --muted:#51607A; --muted-2:#7C8AA3;
  --wrap:1180px; --r:20px; --r-sm:12px;
  --shadow:0 12px 40px rgba(28,40,65,.06); --shadow-lg:0 18px 50px rgba(28,40,65,.12);}
.csPage,.csPage *,.csPage *::before,.csPage *::after{box-sizing:border-box}
.csPage{background:var(--cream); color:var(--navy); font-family:var(--font-brand); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased}
.csPage img{max-width:100%}
.csPage .csWrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.csPage h1,.csPage h2,.csPage h3{margin:0; font-weight:800; letter-spacing:-.015em; color:var(--navy)}
.csPage h2{font-size:clamp(26px,3vw,36px); line-height:1.2}
.csPage p{margin:0 0 1rem}
.csPage a{color:inherit}
.csPage [hidden]{display:none !important}
.csPage :focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:6px}
.csPage section[id]{scroll-margin-top:100px}

.csPage .csBtn{display:inline-flex; align-items:center; gap:9px; background:var(--orange); color:#fff; text-decoration:none; font-weight:800; padding:14px 26px; border-radius:10px; font-size:1rem; border:0; cursor:pointer; font-family:inherit; transition:background .15s ease, transform .15s ease}
.csPage .csBtn:hover{background:var(--orange-d); transform:translateY(-1px)}
.csPage .csBtn.csGhost{background:transparent; border:1.6px solid var(--navy); color:var(--navy)}
.csPage .csBtn.csGhost:hover{background:var(--navy); color:var(--cream)}
.csPage .csBtn.csSm{padding:11px 20px; font-size:.93rem}
.csPage .csBtn.csLg{padding:16px 30px; font-size:1.05rem}

/* hero */
.csPage .csHero{background:var(--deep); color:#fff; position:relative; overflow:hidden; padding:56px 0 64px}
.csPage .csHero::before{content:""; position:absolute; inset:0; background:radial-gradient(720px 420px at 88% 8%, rgba(249,76,16,.26), transparent 62%), radial-gradient(560px 360px at -5% 110%, rgba(34,181,115,.14), transparent 60%)}
.csPage .csHero .csWrap{position:relative}
.csPage .csHero h1{color:#fff; font-size:clamp(32px,4vw,48px); line-height:1.12; max-width:24ch}
.csPage .csLede{color:#C3CCDC; font-size:18px; line-height:1.7; margin:20px 0 0; max-width:46ch}
.csPage .csActions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.csPage .csBtn.csGhostL{background:transparent; border:1.6px solid rgba(255,255,255,.4); color:#fff}
.csPage .csBtn.csGhostL:hover{background:#fff; color:#1C2841}

/* breadcrumb */
.csPage .csCrumbs{background:var(--cream); border-bottom:1px solid var(--line-2)}
.csPage .csCrumbs .csWrap{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 24px; flex-wrap:wrap}
.csPage .csCrumbs ol{display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; margin:0; padding:0; font-size:.84rem; font-weight:700; color:var(--muted-2)}
.csPage .csCrumbs li{display:flex; align-items:center}
.csPage .csCrumbs li+li::before{content:"\203A"; margin-right:8px; color:#C9B4A5; line-height:1}
.csPage .csCrumbs a{display:inline-block; padding:6px 0; line-height:1.2; text-decoration:none}
.csPage .csCrumbs a:hover{color:var(--orange)}
.csPage .csCrumbs [aria-current]{color:var(--navy)}
.csPage .csUpdated{margin:0; font-size:.82rem; color:var(--muted-2); font-weight:600}

/* list */
.csPage .csList{padding:60px 0 40px}
.csPage .csListHead{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:26px}
.csPage .csListHead p{color:var(--muted); margin:10px 0 0; max-width:60ch}
.csPage .csSearch{display:flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--line-2); border-radius:12px; padding:0 14px; min-width:min(340px,100%); color:var(--muted-2)}
.csPage .csSearch svg{width:18px; height:18px; flex:none}
.csPage .csSearch input{border:0; background:transparent; font:inherit; font-weight:600; color:var(--navy); padding:12px 0; width:100%; outline:none}
.csPage .csSearch:focus-within{border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft)}
.csPage .csCount{color:var(--muted-2); font-weight:700; font-size:.9rem; margin:18px 0 22px}

.csPage .csGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:980px){.csPage .csGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.csPage .csGrid{grid-template-columns:1fr}}

/* card */
.csPage .csCard{background:var(--white); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; padding:0; text-decoration:none; color:inherit; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.csPage .csCard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.csPage .csCard:hover .csThumbInner{transform:scale(1.04)}
.csPage .csCard:hover .csCta svg{transform:translateX(4px)}
.csPage .csCard.csIsHidden{display:none}
.csPage .csCardLink{display:flex; flex-direction:column; flex:1; text-decoration:none; color:inherit}
.csPage .csThumb{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--deep)}
.csPage .csThumbInner{position:absolute; inset:0; transition:transform .5s ease}
.csPage .csThumb img{width:100%; height:100%; object-fit:cover; display:block}
/* metric cover: tone gradient + dot pattern + faint industry icon (shown when the photo is missing) */
.csPage .csCover{color:#fff; padding:20px 22px; display:flex; flex-direction:column; justify-content:flex-end}
.csPage .csCover.csTNavy{background:linear-gradient(150deg,#243352,#1C2841 60%)}
.csPage .csCover.csTOrange{background:linear-gradient(150deg,#FF6A33,#D93D08)}
.csPage .csCover.csTGreen{background:linear-gradient(150deg,#22B573,#14704D)}
.csPage .csCover.csTInk{background:linear-gradient(150deg,#3A4A69,#1C2841)}
.csPage .csCover::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.3px); background-size:16px 16px; -webkit-mask-image:linear-gradient(200deg,#000,transparent 70%); mask-image:linear-gradient(200deg,#000,transparent 70%)}
.csPage .csCover .csGhostIco{position:absolute; right:-14px; top:-14px; width:132px; height:132px; color:rgba(255,255,255,.13)}
.csPage .csCover .csCv{position:relative; font-weight:800; letter-spacing:-.04em; line-height:.9; font-size:clamp(46px,5.4vw,64px); font-variant-numeric:tabular-nums; white-space:nowrap}
.csPage .csCover .csCv .csFrom{opacity:.5}
.csPage .csCover .csCv .csArr{font-size:.55em; margin:0 .12em; vertical-align:.18em}
.csPage .csCover .csCl{position:relative; font-weight:800; font-size:.9rem; opacity:.85; margin-top:8px}
/* photo + bottom fade + metric */
.csPage .csPhotoOv{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; padding:20px 22px; color:#fff; background:linear-gradient(180deg, rgba(28,40,65,.05) 20%, rgba(28,40,65,.6) 55%, rgba(28,40,65,.94) 100%)}
.csPage .csPhotoOv .csCv{font-weight:800; letter-spacing:-.04em; line-height:.9; font-size:clamp(46px,5.4vw,64px); font-variant-numeric:tabular-nums; white-space:nowrap; text-shadow:0 2px 18px rgba(0,0,0,.25)}
.csPage .csPhotoOv .csCv .csFrom{opacity:.78}
.csPage .csPhotoOv .csCv .csArr{font-size:.55em; margin:0 .12em; vertical-align:.18em; color:var(--orange-l)}
.csPage .csPhotoOv .csCl{font-weight:800; font-size:.9rem; opacity:.9; margin-top:8px}
.csPage .csCv.csLong{font-size:clamp(34px,3.6vw,44px)}
/* cover label: icon + dark pill */
.csPage .csCover .csCl,.csPage .csPhotoOv .csCl{display:inline-flex; align-self:flex-start; align-items:center; gap:7px; margin-top:10px; padding:5px 12px 5px 9px; border-radius:999px; background:rgba(12,18,32,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:.86rem; font-weight:800; opacity:1; line-height:1.2; color:#fff}
.csPage .csCover .csCl svg,.csPage .csPhotoOv .csCl svg{width:15px; height:15px; flex:none; color:#FFB089}
.csPage .csCover.csTOrange .csCl svg,.csPage .csCover.csTGreen .csCl svg{color:#fff}
/* cover photo: photo + dark fade when it loads; the onerror handler drops it and the tone cover stays */
.csPage .csCover img.csLive{position:absolute; inset:0; width:100%; height:100%; max-width:100%; object-fit:cover; z-index:0}
.csPage .csCover .csShade{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(28,40,65,.05) 20%, rgba(28,40,65,.6) 55%, rgba(28,40,65,.94) 100%)}
.csPage .csCover .csCv,.csPage .csCover .csCl{z-index:2}
.csPage .csCover.csHasLive::before,.csPage .csCover.csHasLive .csGhostIco{display:none}
/* multiplier badge: top left of the cover */
.csPage .csMult{position:absolute; left:16px; top:16px; z-index:3; font-weight:800; font-size:1rem; letter-spacing:-.01em; line-height:1; padding:7px 11px; border-radius:10px; background:var(--orange); color:#fff; font-variant-numeric:tabular-nums; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.csPage .csCard:has(.csCover.csTOrange:not(.csHasLive)) .csMult{background:#fff; color:#D93D08}
.csPage .csCover:not(.csHasLive) .csShade{display:none}

.csPage .csBody{padding:24px 24px 22px; display:flex; flex-direction:column; flex:1}
.csPage .csBody h3{font-size:1.2rem; line-height:1.32; margin-bottom:10px}
.csPage .csBody p{color:var(--muted); font-size:.98rem; line-height:1.65; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.csPage .csMeta{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; row-gap:2px; margin-bottom:8px}
.csPage .csKindWrap{display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.csPage .csKind{font-size:.82rem; font-weight:800; padding:0}
.csPage .csKind.csKB{color:var(--orange-d)}
.csPage .csKind.csKA{color:var(--green-d)}
.csPage .csSec{font-size:.82rem; font-weight:700; color:var(--muted-2)}
.csPage .csSec::before{content:""; display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor; margin-right:8px; vertical-align:middle; opacity:.7}
.csPage .csPills{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.csPage .csPills li{display:inline-flex; align-items:center; gap:6px; background:var(--cream-2); border:1px solid var(--line-2); border-radius:9px; padding:5px 10px; font-size:.84rem; font-weight:800; color:var(--navy)}
.csPage .csPills svg{width:14px; height:14px; color:var(--green)}
.csPage .csFoot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:20px}
.csPage .csCta{display:inline-flex; align-items:center; gap:10px; color:var(--orange); font-weight:800}
.csPage .csCta svg{width:26px; height:18px; transition:transform .2s ease}
.csPage .csDates{display:flex; flex-direction:column; align-items:flex-end; line-height:1.35; text-align:right}
.csPage .csDates .csPub{font-size:.8rem; font-weight:700; color:var(--muted-2)}
.csPage .csMod{font-size:.8rem; font-weight:600; color:var(--muted-2); white-space:nowrap}

.csPage .csEmpty{text-align:center; padding:40px 20px; background:var(--white); border-radius:var(--r); border:1px dashed var(--cream-d)}
.csPage .csEmpty p{color:var(--muted)}
.csPage .csEmpty b{color:var(--navy)}
.csPage .csMoreWrap{display:flex; justify-content:center; margin-top:34px}

/* summary table */
.csPage .csSr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.csPage .csSum{padding:56px 0}
.csPage .csSumHead{margin-bottom:24px}
.csPage .csSumHead p{color:var(--muted); margin:10px 0 0}
.csPage .csSumHead a,.csPage .csFaq a{display:inline-block; padding:4px 0; color:var(--orange-d); font-weight:800}
.csPage .csTblWrap{overflow-x:auto; background:var(--white); border-radius:var(--r); box-shadow:var(--shadow)}
.csPage table{width:100%; border-collapse:collapse; min-width:640px; font-size:.95rem}
.csPage th,.csPage td{text-align:left; padding:16px 20px; border-top:1px solid var(--line); vertical-align:top}
.csPage thead th{border-top:0; color:var(--muted-2); font-size:.85rem; font-weight:800; background:var(--cream-2)}
.csPage tbody th{font-weight:800; white-space:nowrap; width:34%}
.csPage tbody th,.csPage tbody td{vertical-align:middle}
.csPage td{color:var(--muted)}
.csPage td:last-child{color:var(--navy); font-weight:800}
.csPage .csBiz{display:flex; align-items:center; gap:12px}
.csPage .csBizIco{flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff}
.csPage .csBizIco svg{width:22px; height:22px}
.csPage .csBizIco.csTNavy{background:linear-gradient(150deg,#243352,#1C2841)}
.csPage .csBizIco.csTOrange{background:linear-gradient(150deg,#FF6A33,#D93D08)}
.csPage .csBizIco.csTGreen{background:linear-gradient(150deg,#22B573,#14704D)}
.csPage .csBizIco.csTInk{background:linear-gradient(150deg,#3A4A69,#1C2841)}
.csPage .csBizTxt{display:flex; flex-direction:column; line-height:1.3}
.csPage .csBizTxt b{font-weight:800; white-space:nowrap}
.csPage .csBizTxt small{font-size:.78rem; font-weight:700; margin-top:2px}
.csPage .csBizTxt small.csKB{color:var(--orange-d)}
.csPage .csBizTxt small.csKA{color:var(--green-d)}
.csPage .csMethod{margin:16px 0 0; color:var(--muted); font-size:.92rem; line-height:1.6}
.csPage .csMethod b{color:var(--navy)}
/* mobile: table rows stack as cards */
@media(max-width:640px){
  .csPage table{min-width:0}
  .csPage thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .csPage tbody tr{display:block; padding:18px 18px 16px; border-top:1px solid var(--line)}
  .csPage tbody tr:first-child{border-top:0}
  .csPage tbody th,.csPage tbody td{display:block; width:auto; padding:0; border:0}
  .csPage tbody th{margin-bottom:12px}
  .csPage tbody td{margin-top:8px}
  .csPage tbody td::before{content:attr(data-label); display:block; font-size:.75rem; font-weight:800; color:var(--muted-2); margin-bottom:2px}
  .csPage .csBizTxt b{white-space:normal}
}

/* FAQ: card accordion, same look and behaviour as the Meta Ads page (script in _CustomerStoriesFaq) */
.csPage .csFaqs{padding:24px 0 20px}
.csPage .csFaqWrap h2{margin-bottom:22px}
.csPage .csFaq{display:grid; gap:12px}
.csPage details.csFaqItem{background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); overflow:hidden; scroll-margin-top:110px; transition:border-color .2s ease, box-shadow .2s ease}
.csPage details.csFaqItem:hover{box-shadow:var(--shadow-lg)}
.csPage details.csFaqItem[open]{border-color:var(--orange)}
.csPage details.csFaqItem summary{display:flex; align-items:center; gap:16px; cursor:pointer; padding:18px 22px; list-style:none; -webkit-tap-highlight-color:transparent}
.csPage details.csFaqItem summary::-webkit-details-marker{display:none}
.csPage details.csFaqItem summary h3{flex:1; margin:0; font-size:17px; font-weight:800; color:var(--navy); line-height:1.4; transition:color .15s ease}
.csPage details.csFaqItem summary:hover h3{color:var(--orange-d)}
.csPage details.csFaqItem summary:focus-visible{outline:3px solid rgba(249,76,16,.35); outline-offset:-3px}
.csPage .csFaqIcon{flex:none; position:relative; width:22px; height:22px; border-radius:50%; background:var(--cream); transition:background .2s ease}
.csPage .csFaqIcon::before,.csPage .csFaqIcon::after{content:""; position:absolute; left:50%; top:50%; background:var(--orange-d); transform:translate(-50%,-50%); transition:transform .25s ease, opacity .2s ease, background .2s ease}
.csPage .csFaqIcon::before{width:10px; height:2px}
.csPage .csFaqIcon::after{width:2px; height:10px}
.csPage details.csFaqItem[open] .csFaqIcon{background:var(--orange)}
.csPage details.csFaqItem[open] .csFaqIcon::before,.csPage details.csFaqItem[open] .csFaqIcon::after{background:#fff}
.csPage details.csFaqItem[open] .csFaqIcon::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.csPage details.csFaqItem.csClosing{border-color:var(--line)}
.csPage details.csFaqItem.csClosing .csFaqIcon{background:var(--cream)}
.csPage details.csFaqItem.csClosing .csFaqIcon::before,.csPage details.csFaqItem.csClosing .csFaqIcon::after{background:var(--orange-d)}
.csPage details.csFaqItem.csClosing .csFaqIcon::after{transform:translate(-50%,-50%); opacity:1}
.csPage .csFaqBody{overflow:hidden; transition:height .3s ease}
.csPage .csFaqBody p{margin:0; padding:0 22px 20px; color:var(--muted); font-size:16px; line-height:1.7}
@media(max-width:600px){
  .csPage details.csFaqItem summary{padding:15px 16px; gap:12px}
  .csPage details.csFaqItem summary h3{font-size:16px}
  .csPage .csFaqBody p{padding:0 16px 16px}
}

/* final CTA */
.csPage .csFinal{padding:60px 0 84px}
.csPage .csFinalBox{background:var(--deep); border-radius:26px; padding:60px 40px; text-align:center; position:relative; overflow:hidden}
.csPage .csFinalBox::before{content:""; position:absolute; inset:0; background:radial-gradient(560px 260px at 50% -12%, rgba(249,76,16,.28), transparent 66%)}
.csPage .csFinalBox>*{position:relative}
.csPage .csFinalBox h2{color:#fff}
.csPage .csFinalBox p{color:#C3CCDC; font-size:18px; margin:16px auto 0; max-width:52ch}
.csPage .csFinalActions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px}
.csPage .csFinal .csBtn.csGhost{border-color:rgba(255,255,255,.4); color:#fff}
.csPage .csFinal .csBtn.csGhost:hover{background:#fff; color:#1C2841}

@media(prefers-reduced-motion:reduce){.csPage *{transition:none !important; animation:none !important}}
/* Mobile: the hero starts right under the fixed 92px header, so a shorter top padding (as the homepage hero) */
@media only screen and (max-width:768px){.csPage .csHero{padding-top:32px}}