/* ============================================================
   ClickSambo — Google Ads Offline Conversions page
   (/google-ads-offline-conversions, /tr/google-reklamlari-offline-donusum, /pt-br/conversoes-offline-do-google-ads)
   Scoped to <main class="ocPage">: header, footer and other pages are untouched.
   Every rule is prefixed with .ocPage and every class carries the oc prefix, so the site-wide
   classes in layout.css (.btn, .hero, section .inner, ...) 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.
   ============================================================ */
.ocPage{--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; --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)}
.ocPage *{box-sizing:border-box}
.ocPage{margin:0; background:var(--cream); color:var(--navy); font-family:var(--font-brand); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;}
/* layout.css sets `*{font-family:Mulish}`, `b,strong{font-weight:700}`, `ol,ul{list-style:none}` and
   zeroes the margins of dl/ul; restore the browser defaults the design relies on. */
.ocPage *{font-family:inherit}
.ocPage b,.ocPage strong{font-weight:bolder}
.ocPage dl,.ocPage ul{margin:1em 0}
.ocPage ul{list-style:disc; padding-left:40px}
.ocPage .ocWrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.ocPage h1,.ocPage h2,.ocPage h3{margin:0; font-weight:800; letter-spacing:-.015em; color:var(--navy)}
.ocPage h1{font-size:clamp(32px,4.2vw,48px); line-height:1.15}
.ocPage h2{font-size:clamp(26px,3vw,36px); line-height:1.2}
.ocPage h3{font-size:clamp(19px,1.6vw,21px); line-height:1.25}
.ocPage p{margin:0 0 1rem}
.ocPage a{color:inherit}
.ocPage .ocBtn{display:inline-flex; align-items:center; gap:9px; background:var(--orange); color:#fff; text-decoration:none; font-weight:700; padding:14px 26px; border-radius:10px; font-size:1rem; border:0; cursor:pointer; font-family:inherit; transition:background .15s ease, transform .15s ease;}
.ocPage .ocBtn:hover{background:var(--orange-d); transform:translateY(-1px)}
.ocPage .ocBtn.ocGhost{background:transparent; border:1.6px solid var(--navy); color:var(--navy)}
.ocPage .ocBtn.ocGhost:hover{background:var(--navy); color:#fff}
.ocPage .ocHero{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);}
.ocPage .ocHeroGrid{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center}
@media(max-width:940px){
  .ocPage .ocHeroGrid{grid-template-columns:1fr; gap:40px}
}
.ocPage .ocEyebrow{margin:0 0 14px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);}
.ocPage .ocLede{color:var(--muted); font-size:16px; line-height:1.7; margin-top:20px; max-width:52ch}
.ocPage .ocActions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap}
.ocPage .ocClickfield{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow-lg)}
.ocPage section{padding:84px 0}
.ocPage section[id]{scroll-margin-top:86px}
.ocPage section.ocAlt{background:var(--white)}
.ocPage .ocSechead{max-width:66ch; margin-bottom:40px}
.ocPage .ocSechead p{color:var(--muted); margin-top:12px}
.ocPage .ocCrumbs{background:var(--cream); border-top:1px solid var(--line-2)}
.ocPage .ocCrumbs .ocWrap{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 24px; flex-wrap:wrap}
.ocPage .ocCrumbs 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)}
.ocPage .ocCrumbs li+li::before{content:"›"; margin-right:8px; color:#C9B4A5}
.ocPage .ocCrumbs a{text-decoration:none}
.ocPage .ocCrumbs a:hover{color:var(--orange)}
.ocPage .ocCrumbs [aria-current]{color:var(--navy)}
.ocPage .ocUpdated{margin:0; font-size:.82rem; color:var(--muted-2); font-weight:600}
.ocPage .ocBand{background:var(--navy)}
.ocPage .ocBand .ocWrap{padding:52px 24px}
.ocPage .ocFigs{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0}
@media(max-width:860px){
  .ocPage .ocFigs{grid-template-columns:repeat(2,1fr); row-gap:34px}
}
.ocPage .ocFig{padding:0 26px; border-left:1px solid rgba(255,255,255,.17)}
.ocPage .ocFig:first-child{padding-left:0; border-left:0}
@media(max-width:860px){
  .ocPage .ocFig:nth-child(3){padding-left:0; border-left:0}
}
.ocPage .ocFig dt{font-size:.86rem; color:#B9C2D2; font-weight:600; margin-bottom:10px; max-width:24ch}
.ocPage .ocFig dd{margin:0; font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1; color:#fff}
.ocPage .ocFig dd em{font-style:normal; color:#FF7A47}
.ocPage .ocGate{display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start}
@media(max-width:900px){
  .ocPage .ocGate{grid-template-columns:1fr}
}
.ocPage .ocGate > div{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:32px; box-shadow:var(--shadow)}
.ocPage details{background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:20px 24px; margin-bottom:12px}
.ocPage summary{font-weight:800; cursor:pointer; list-style:none; font-size:17px}
.ocPage summary::-webkit-details-marker{display:none}
.ocPage summary::after{content:"+"; float:right; color:var(--orange); font-weight:800}
.ocPage details[open] summary::after{content:"–"}
.ocPage details p{margin:12px 0 0; color:var(--muted)}
.ocPage .ocCitation{margin-top:28px; font-size:.86rem; color:var(--muted-2)}
.ocPage .ocCitation a{color:var(--muted-2)}
.ocPage :focus-visible{outline:2px solid var(--orange); outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .ocPage *{transition:none !important; animation:none !important}
}
.ocPage .ocCode{font-weight:700; background:var(--cream-d); color:var(--navy); padding:1px 7px; border-radius:6px; font-size:.9em; white-space:nowrap}
.ocPage .ocHero .ocLede{max-width:54ch}
.ocPage .ocLoopcard h3{font-size:15px; margin:0 0 4px}
.ocPage .ocLoopcard .ocLcSub{font-size:.82rem; color:var(--muted-2); margin:0 0 16px}
.ocPage .ocPipe{display:flex; flex-direction:column}
.ocPage .ocPnode{display:flex; align-items:center; gap:14px}
.ocPage .ocPnode .ocPico{width:40px; height:40px; border-radius:12px; background:var(--cream); border:1px solid var(--line-2); color:var(--navy); display:grid; place-items:center; flex:none}
.ocPage .ocPnode .ocPico svg{width:20px; height:20px}
.ocPage .ocPnode .ocPtext b{display:block; font-weight:800; font-size:14.5px; color:var(--navy); line-height:1.2}
.ocPage .ocPnode .ocPtext span{font-size:12.5px; color:var(--muted-2)}
.ocPage .ocPnode.ocDone .ocPico{background:var(--green-soft); border-color:#C7EBD8; color:var(--green-d)}
.ocPage .ocPnode.ocDone .ocPtext b{color:var(--green-d)}
.ocPage .ocPconn{width:2px; height:13px; background:var(--cream-d); margin:3px 0 3px 19px; border-radius:2px}
.ocPage .ocCallout{display:grid; grid-template-columns:46px minmax(0,1fr); gap:18px; align-items:start; background:var(--white); border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:var(--r-sm); padding:24px 26px; box-shadow:var(--shadow); margin-top:22px}
.ocPage .ocCallout .ocCico{width:46px; height:46px; border-radius:13px; background:var(--orange-soft); color:var(--orange); display:grid; place-items:center}
.ocPage .ocCallout .ocCico svg{width:23px; height:23px}
.ocPage .ocCallout h3{margin:2px 0 6px}
.ocPage .ocCallout p{margin:0; color:var(--muted); max-width:64ch}
.ocPage .ocPgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:720px){
  .ocPage .ocPgrid{grid-template-columns:1fr}
}
.ocPage .ocPill{background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:24px 26px}
.ocPage .ocPill .ocTag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-d); background:var(--orange-soft); padding:5px 11px; border-radius:999px; margin-bottom:14px}
.ocPage .ocPill h3{margin-bottom:8px}
.ocPage .ocPill p{margin:0; color:var(--muted)}
.ocPage .ocDarkgap{background:var(--navy)}
.ocPage .ocDarkgap .ocSechead h2{color:#fff}
.ocPage .ocDarkgap .ocSechead p{color:#B9C2D2}
.ocPage .ocDarkgap .ocClose{color:#B9C2D2; margin:26px 0 0; max-width:70ch}
.ocPage .ocFails{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px}
@media(max-width:720px){
  .ocPage .ocFails{grid-template-columns:1fr}
}
.ocPage .ocFail{display:flex; gap:13px; align-items:flex-start; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-sm); padding:16px 18px}
.ocPage .ocFail .ocFico{color:#FF7A47; flex:none; margin-top:1px}
.ocPage .ocFail .ocFico svg{width:20px; height:20px}
.ocPage .ocFail b{color:#fff; display:block; font-size:14.5px; margin-bottom:1px}
.ocPage .ocFail span{color:#AEB9CC; font-size:13.5px; line-height:1.5}
.ocPage .ocProdgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:720px){
  .ocPage .ocProdgrid{grid-template-columns:1fr}
}
.ocPage .ocProd{background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r); padding:26px 26px}
.ocPage .ocProd .ocPdico{width:46px; height:46px; border-radius:13px; background:var(--green-soft); color:var(--green-d); display:grid; place-items:center; margin-bottom:15px}
.ocPage .ocProd .ocPdico svg{width:23px; height:23px}
.ocPage .ocProd h3{margin-bottom:8px}
.ocPage .ocProd p{margin:0; color:var(--muted)}
.ocPage .ocNsig{display:grid; grid-template-columns:56px minmax(0,1fr); gap:20px; align-items:start; background:var(--navy); border-radius:var(--r); padding:30px 32px; margin-top:16px}
.ocPage .ocNsig .ocNico{width:56px; height:56px; border-radius:15px; background:rgba(255,255,255,.07); color:#FF7A47; display:grid; place-items:center}
.ocPage .ocNsig .ocNico svg{width:27px; height:27px}
.ocPage .ocNsig h3{color:#fff; margin-bottom:7px}
.ocPage .ocNsig p{margin:0; color:#B9C2D2; max-width:72ch}
.ocPage .ocIncl{list-style:none; margin:0; padding:0}
.ocPage .ocIncl li{position:relative; padding-left:29px; margin-bottom:13px; color:var(--muted)}
.ocPage .ocIncl li:last-child{margin-bottom:0}
.ocPage .ocIncl li::before{content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%; background:var(--green-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317835A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/12px no-repeat}
.ocPage .ocCtacard{display:flex; flex-direction:column; gap:12px}
.ocPage .ocCtacard .ocBtn{width:100%; justify-content:center}
.ocPage .ocCtacard .ocWaLink{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; text-decoration:none; color:var(--navy); padding:6px 0}
.ocPage .ocCtacard .ocWaLink:hover{color:var(--orange)}
.ocPage .ocCtacard .ocWaLink svg{width:19px; height:19px}
.ocPage .ocCtanote{margin:6px 0 0; font-size:.8rem; color:var(--muted-2); text-align:center}
.ocPage .ocStepwrap{display:grid; grid-template-columns:200px minmax(0,1fr); gap:44px; align-items:start}
@media(max-width:820px){
  .ocPage .ocStepwrap{grid-template-columns:1fr; gap:12px}
}
.ocPage .ocStepwrap .ocSnum{margin:0; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2)}
.ocPage .ocStepwrap .ocSbig{margin:6px 0 0; font-size:clamp(2.6rem,5.5vw,3.6rem); font-weight:800; letter-spacing:-.02em; color:var(--orange); line-height:1}
.ocPage .ocStepwrap h2{margin:0 0 14px}
.ocPage .ocStepwrap .ocSbody{margin:0; color:var(--muted); max-width:66ch}
.ocPage .ocSechead .ocEyebrow{color:var(--muted-2); margin:0 0 14px}
.ocPage .ocRelGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:720px){
  .ocPage .ocRelGrid{grid-template-columns:1fr}
}
.ocPage .ocRel{display:block; background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:20px 22px; text-decoration:none; transition:border-color .15s ease, transform .15s ease}
.ocPage .ocRel:hover{border-color:var(--orange); transform:translateY(-2px)}
.ocPage .ocRel .ocRelT{display:flex; align-items:center; gap:8px; font-weight:800; color:var(--navy); font-size:1.02rem; margin-bottom:6px}
.ocPage .ocRel .ocRelT svg{width:16px; height:16px; color:var(--orange); flex:none}
.ocPage .ocRel .ocRelD{display:block; color:var(--muted); font-size:.92rem; line-height:1.6}
.ocPage .ocKtSec{padding:46px 0}
.ocPage .ocKt{background:var(--cream-2); border:1px solid var(--line-2); border-left:3px solid var(--orange); border-radius:var(--r-sm); padding:26px 28px}
.ocPage .ocKt h2{font-size:1.15rem; margin:0 0 14px}
.ocPage .ocKt ul{margin:0; padding-left:20px}
.ocPage .ocKt li{margin-bottom:9px; color:var(--navy)}
.ocPage .ocKt li:last-child{margin-bottom:0}
.ocPage .ocUpdated a{color:var(--navy); text-decoration:none; font-weight:800}
.ocPage .ocUpdated a:hover{color:var(--orange)}
.ocPage .ocRefs{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ocPage .ocRefs a{display:flex; align-items:baseline; gap:12px; padding:15px 18px; background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm); text-decoration:none; color:var(--navy); transition:border-color .15s ease}
.ocPage .ocRefs a:hover{border-color:var(--orange)}
.ocPage .ocRefs a::before{content:"\2197"; color:var(--orange); font-weight:800; flex:none}
.ocPage .ocRefs .ocRfT{font-weight:700}
.ocPage .ocRefs .ocRfS{margin-left:auto; font-size:.82rem; color:var(--muted-2); white-space:nowrap; align-self:center}
@media(max-width:560px){
  .ocPage .ocRefs .ocRfS{display:none}
}