/* ============================================================
   ClickSambo — Comparisons hub page
   (/compare, /tr/karsilastirma, /pt-br/comparar)
   Scoped to <main class="cmpPage">: header, footer and other pages are untouched.
   Every rule is prefixed with .cmpPage and every class carries the cmp prefix, so the site-wide
   classes in layout.css (.btn, .hero, .wrap, ...) 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. .cmpIn is added by the reveal script (as in the design).
   The design's own nav, footer and chat button are replaced by the site's.
   ============================================================ */
/* layout.css resets margins/paddings of most elements, sets `*{font-family:Mulish}`,
   `b,strong{font-weight:700}` and `ol,ul{list-style:none}`; restore the browser defaults the design
   relies on. :where() keeps these at element specificity, so every design rule below still wins. */
.cmpPage *{font-family:inherit}
:where(.cmpPage) :where(p,ul,ol){margin:1em 0}
:where(.cmpPage) :where(ul,ol){padding-left:40px}
:where(.cmpPage) h2{margin:.83em 0}
:where(.cmpPage) h3{margin:1em 0}
:where(.cmpPage) b,:where(.cmpPage) strong{font-weight:bolder}
.cmpPage{--font-brand:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif;
  --navy:#1C2841; --ink:#0F1420;
  --orange:#F94C10; --orange-d:#D93D08; --orange-soft:rgba(249,76,16,.1);
  --green:#22B573; --green-d:#17835A; --green-soft:#E9F7F0;
  --cream:#FFF1E9; --cream-2:#FDF6F1; --cream-d:#EFDCD1; --white:#fff;
  --line:#ECECF3; --line-2:#F0E2D8; --muted:#51607A; --muted-2:#7C8AA3; --grey:#3A4A69;
  --wrap:1120px; --r:20px; --r-sm:12px;
  --shadow:0 12px 40px rgba(28,40,65,.06); --shadow-lg:0 18px 50px rgba(28,40,65,.09);}
.cmpPage,.cmpPage *{box-sizing:border-box}
.cmpPage{margin:0; background:var(--cream); color:var(--navy); font-family:var(--font-brand); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased}
.cmpPage .cmpWrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.cmpPage h1,.cmpPage h2,.cmpPage h3{margin:0; font-weight:800; letter-spacing:-.015em; color:var(--navy)}
.cmpPage h1{font-size:clamp(32px,4.2vw,48px); line-height:1.15}
.cmpPage h2{font-size:clamp(26px,3vw,36px); line-height:1.2}
.cmpPage h3{font-size:clamp(19px,1.6vw,21px); line-height:1.25}
.cmpPage p{margin:0 0 1rem}
.cmpPage a{color:inherit}
.cmpPage .cmpEyebrow{margin:0 0 14px; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2)}
.cmpPage .cmpBtn{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}
.cmpPage .cmpBtn:hover{background:var(--orange-d); transform:translateY(-1px)}
.cmpPage .cmpBtn.cmpGhost{background:transparent; border:1.6px solid var(--navy); color:var(--navy)}
.cmpPage .cmpBtn.cmpGhost:hover{background:var(--navy); color:#fff}
.cmpPage .cmpBtn.cmpLg{padding:16px 30px; font-size:1.05rem}
.cmpPage .cmpHero{position:relative; overflow:hidden; padding:74px 0 84px; background:radial-gradient(760px 420px at 85% 0%, rgba(249,76,16,.09), transparent 62%),radial-gradient(620px 380px at 0% 100%, rgba(34,181,115,.08), transparent 60%),var(--cream)}
.cmpPage .cmpHero h1 em{font-style:normal; color:var(--orange)}
.cmpPage .cmpLede{color:var(--muted); font-size:18px; line-height:1.7; margin-top:20px; max-width:52ch}
.cmpPage .cmpActions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap}
.cmpPage section{padding:84px 0}
.cmpPage section[id]{scroll-margin-top:100px}
.cmpPage section.cmpAlt{background:var(--white)}
.cmpPage .cmpSechead{max-width:64ch; margin-bottom:44px}
.cmpPage .cmpSechead.cmpCenter{margin-left:auto; margin-right:auto; text-align:center}
.cmpPage .cmpSechead p{color:var(--muted); margin:12px 0 0}
.cmpPage .cmpFaqwrap{max-width:820px}
.cmpPage .cmpFaq details{background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:20px 24px; margin-bottom:12px}
.cmpPage .cmpFaq summary{font-weight:800; cursor:pointer; list-style:none; font-size:17px; display:flex; justify-content:space-between; gap:16px}
.cmpPage .cmpFaq summary::-webkit-details-marker{display:none}
.cmpPage .cmpFaq summary::after{content:"+"; color:var(--orange); font-weight:800; flex:none}
.cmpPage .cmpFaq details[open] summary::after{content:"\2013"}
.cmpPage .cmpFaq details p{margin:12px 0 0; color:var(--muted)}
.cmpPage .cmpFinal .cmpWrap{padding:0 24px}
.cmpPage .cmpFinalBox{background:var(--navy); border-radius:26px; padding:60px 40px; text-align:center; position:relative; overflow:hidden}
.cmpPage .cmpFinalBox::before{content:""; position:absolute; inset:0; background:radial-gradient(560px 260px at 50% -12%, rgba(249,76,16,.28), transparent 66%)}
.cmpPage .cmpFinalBox>*{position:relative}
.cmpPage .cmpFinalBox h2{color:#fff}
.cmpPage .cmpFinalBox p{color:#C3CCDC; font-size:18px; margin:16px auto 0; max-width:52ch}
.cmpPage .cmpFinalActions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px}
.cmpPage .cmpFinal .cmpBtn.cmpGhost{border-color:rgba(255,255,255,.4); color:#fff}
.cmpPage .cmpFinal .cmpBtn.cmpGhost:hover{background:#fff; color:var(--navy)}
.cmpPage .cmpFinalBadges{display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:center; margin-top:30px; color:#B9C2D2; font-size:.9rem; font-weight:600}
.cmpPage .cmpFinalBadges span{display:flex; align-items:center; gap:8px}
.cmpPage .cmpFinalBadges svg{width:16px; height:16px; color:#FF7A47}
.cmpPage :focus-visible{outline:2px solid var(--orange); outline-offset:3px}
.cmpPage .cmpReveal{opacity:0; transform:translateY(16px)}
.cmpPage .cmpReveal.cmpIn{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
@media(prefers-reduced-motion:reduce){
  .cmpPage,.cmpPage *{transition:none !important; animation:none !important}
  .cmpPage .cmpReveal{opacity:1; transform:none}
}
.cmpPage .cmpImpsec{padding:54px 0}
.cmpPage .cmpImpact{display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:var(--white); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
@media(max-width:640px){
  .cmpPage .cmpImpact{grid-template-columns:1fr}
}
.cmpPage .cmpImp{padding:30px 26px; text-align:center; border-left:1px solid var(--line)}
.cmpPage .cmpImp:first-child{border-left:0}
@media(max-width:640px){
  .cmpPage .cmpImp{border-left:0; border-top:1px solid var(--line)}
  .cmpPage .cmpImp:first-child{border-top:0}
}
.cmpPage .cmpImpN{font-size:clamp(2rem,4vw,2.8rem); font-weight:800; letter-spacing:-.02em; line-height:1; white-space:nowrap; background:linear-gradient(135deg,var(--orange),var(--orange-d)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.cmpPage .cmpImpL{margin-top:10px; color:var(--muted); font-weight:700; font-size:.92rem}
.cmpPage .cmpCrumbs{background:var(--cream); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.cmpPage .cmpCrumbs .cmpWrap{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 24px; flex-wrap:wrap}
.cmpPage .cmpCrumbs ol{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; font-size:.84rem; font-weight:700; color:var(--muted-2)}
.cmpPage .cmpCrumbs li+li::before{content:"›"; margin-right:8px; color:#C9B4A5}
.cmpPage .cmpCrumbs a{text-decoration:none}
.cmpPage .cmpCrumbs a:hover{color:var(--orange)}
.cmpPage .cmpCrumbs [aria-current]{color:var(--navy)}
.cmpPage .cmpUpdated{margin:0; font-size:.82rem; color:var(--muted-2); font-weight:600}
.cmpPage .cmpHero.cmpHub{padding:70px 0 64px; text-align:center}
.cmpPage .cmpHero.cmpHub .cmpLede{margin-left:auto; margin-right:auto; max-width:60ch}
.cmpPage .cmpHero.cmpHub .cmpActions{justify-content:center}
.cmpPage .cmpHubStats{display:inline-flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px}
.cmpPage .cmpHubStat{display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:999px; padding:8px 16px; font-weight:800; font-size:.88rem}
.cmpPage .cmpHubStat .cmpDot{width:8px; height:8px; border-radius:50%}
.cmpPage .cmpGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:940px){
  .cmpPage .cmpGrid{grid-template-columns:1fr 1fr}
}
.cmpPage .cmpGrid.cmpTwo{grid-template-columns:repeat(2,1fr)}
@media(max-width:600px){
  .cmpPage .cmpGrid,.cmpPage .cmpGrid.cmpTwo{grid-template-columns:1fr}
}
.cmpPage .cmpCard{position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; box-shadow:var(--shadow); text-decoration:none; color:var(--navy); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.cmpPage a.cmpCard:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--cream-d)}
.cmpPage a.cmpCard::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--orange),var(--orange-d))}
.cmpPage .cmpCard.cmpSoon{background:var(--cream-2); border:1.5px dashed var(--cream-d); box-shadow:none}
.cmpPage .cmpTop{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px}
.cmpPage .cmpVs{display:flex; align-items:center; gap:8px}
.cmpPage .cmpVs .cmpB{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:.95rem; flex:none}
.cmpPage .cmpVs .cmpB.cmpCs{background:var(--orange); color:#fff}
.cmpPage .cmpVs .cmpB.cmpCs svg{width:22px; height:22px}
.cmpPage .cmpVs .cmpB.cmpRv{background:var(--cream); color:var(--grey); border:1px solid var(--line-2)}
.cmpPage .cmpCard.cmpSoon .cmpVs .cmpB.cmpRv{background:var(--white)}
.cmpPage .cmpVs .cmpX{font-size:.72rem; font-weight:800; letter-spacing:.08em; color:var(--muted-2)}
.cmpPage .cmpStatus{font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; border-radius:999px; white-space:nowrap}
.cmpPage .cmpStatus.cmpLive{background:var(--green-soft); color:var(--green-d)}
.cmpPage .cmpStatus.cmpSoon{background:var(--white); color:var(--muted-2); border:1px solid var(--line-2)}
.cmpPage .cmpCard h3{margin-bottom:8px}
.cmpPage .cmpCard p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.6}
.cmpPage .cmpTags{display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 0; padding:0; list-style:none}
.cmpPage .cmpTags li{background:var(--cream-2); border:1px solid var(--line-2); border-radius:7px; padding:3px 9px; font-size:.76rem; font-weight:700; color:var(--grey)}
.cmpPage .cmpGo{margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:7px; color:var(--orange-d); font-weight:800; font-size:.92rem; transition:gap .15s ease}
.cmpPage a.cmpCard:hover .cmpGo{gap:11px}
.cmpPage .cmpWait{margin-top:auto; padding-top:20px; color:var(--muted-2); font-weight:700; font-size:.88rem}
.cmpPage .cmpGrid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:940px){
  .cmpPage .cmpGrid3{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .cmpPage .cmpGrid3{grid-template-columns:1fr}
}
.cmpPage .cmpCap{background:var(--white); border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:var(--r-sm); padding:24px 26px; box-shadow:var(--shadow)}
.cmpPage .cmpAlt .cmpCap{background:var(--cream-2); border-color:var(--line-2); border-left-color:var(--orange); box-shadow:none}
.cmpPage .cmpCap .cmpCi{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--cream); color:var(--orange); margin-bottom:12px}
.cmpPage .cmpAlt .cmpCap .cmpCi{background:var(--white)}
.cmpPage .cmpCap .cmpCi svg{width:20px; height:20px}
.cmpPage .cmpCcgrid .cmpCap h3{font-size:1.05rem; font-weight:800; margin-bottom:6px}
.cmpPage .cmpCcgrid .cmpCap p{color:var(--muted); font-size:15px; line-height:1.65; margin:0}
.cmpPage .cmpGeosec{padding:56px 0 0}
.cmpPage .cmpGeo{background:var(--white); border:1px solid var(--line); border-left:4px solid var(--navy); border-radius:var(--r); padding:30px 32px; box-shadow:var(--shadow)}
.cmpPage .cmpGeo h2{font-size:1.15rem; margin-bottom:22px}
.cmpPage .cmpGeo .cmpItems{display:grid; grid-template-columns:1fr 1fr; gap:22px 34px}
.cmpPage .cmpGeo .cmpItems > div:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:820px){
  .cmpPage .cmpGeo{padding:26px 22px}
  .cmpPage .cmpGeo .cmpItems{grid-template-columns:1fr; gap:20px}
  .cmpPage .cmpGeo .cmpItems > div:last-child{grid-column:auto}
}
.cmpPage .cmpGitem{display:flex; gap:14px; align-items:flex-start}
.cmpPage .cmpTile{flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--cream); color:var(--orange)}
.cmpPage .cmpTile svg{width:19px; height:19px}
.cmpPage .cmpTile.cmpN{background:#EDF0F6; color:var(--navy)}
.cmpPage .cmpTile.cmpG{background:var(--green-soft); color:var(--green-d)}
.cmpPage .cmpGitem p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.65}
.cmpPage .cmpGitem p strong{color:var(--navy); font-weight:800}
.cmpPage .cmpGitem p a{color:var(--orange-d); font-weight:800; text-decoration:none}
/* the design sets these three inline (style="...") */
.cmpPage .cmpHubStat .cmpDot.cmpDotLive{background:var(--green)}
.cmpPage .cmpHubStat .cmpDot.cmpDotSoon{background:var(--muted-2)}
.cmpPage .cmpEyebrow.cmpCenterText{text-align:center}
/* 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){.cmpPage .cmpHero{padding-top:32px}}