/* How We Manage Your Ads: platform tabs, four-step selector, one step card. Heading comes from .hww-head (main.css). */
.hww-flow{--hww-amber:#ffbc4b;font-family:var(--font-body);color:var(--ink)}
/* platform tabs: underline style */
.hww-tabs{display:flex;gap:26px;margin-top:22px}
.hww-tab{display:flex;align-items:center;gap:10px;height:44px;padding:0 2px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;font:inherit;font-size:14.5px;font-weight:500;line-height:1.2;color:#8a919d;white-space:nowrap;cursor:pointer;transition:color .2s ease,border-color .2s ease}
.hww-tab::before{content:"";flex:none;width:22px;height:22px;background:center/contain no-repeat}
#hww-tab-g::before{background-image:url(../assets/google-ads-tag-icon.webp?v=551f474aeb)}
#hww-tab-m::before{background-image:url(../assets/service-meta-icon.webp?v=346b12841a)}
.hww-tab:not(.is-active):hover{color:var(--ink)}
.hww-tab.is-active{border-bottom-color:var(--hww-amber);color:var(--ink)}
.hww-tab:focus-visible,.hww-n:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* step selector: tablet and mobile = one row of four, underline marks the active step */
.hww-nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:22px;border-bottom:1px solid #eceef2;counter-reset:hn}
.hww-n{counter-increment:hn;position:relative;margin-bottom:-1px;padding:14px 6px;border:0;border-bottom:2px solid transparent;background:none;text-align:center;font:inherit;color:#8a919d;cursor:pointer;transition:color .2s ease,border-color .2s ease}
.hww-n-x{display:block}
.hww-n b{display:block;font-size:14px;font-weight:400;line-height:1.3;color:inherit}
.hww-n em{display:none}
.hww-n:hover{color:var(--ink)}
.hww-n.is-on{border-bottom-color:var(--hww-amber);color:var(--ink)}
.hww-n.is-on b{font-weight:500}
/* step card: white with the soft dotted pattern used on the service cards */
.hww-panel{margin-top:16px}
.hww-steps,.hww-its{list-style:none;margin:0;padding:0}
.hww-steps{display:grid;grid-template-columns:minmax(0,1fr)}
.hww-step{display:block;grid-area:1/1;visibility:hidden;position:relative;isolation:isolate;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden}
.hww-step::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(120deg,#ffbc4b,#9a7bff,#4a9bff);opacity:.4;-webkit-mask-image:radial-gradient(circle at center,#000 1.2px,transparent 1.7px),radial-gradient(ellipse 46% 48% at 50% 50%,#000 0,rgba(0,0,0,.6) 45%,transparent 100%);mask-image:radial-gradient(circle at center,#000 1.2px,transparent 1.7px),radial-gradient(ellipse 46% 48% at 50% 50%,#000 0,rgba(0,0,0,.6) 45%,transparent 100%);-webkit-mask-size:9px 9px,100% 100%;mask-size:9px 9px,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}
.hww-step.is-on{visibility:visible}
.hww-pill{display:inline-flex;align-items:center;gap:14px;color:#6b7385;font:600 12px/1 var(--font-body);letter-spacing:1.4px;white-space:nowrap}
.hww-pill::after{content:"";width:54px;height:3px;background:linear-gradient(90deg,var(--hww-amber) var(--hww-n,25%),#e3e6ea var(--hww-n,25%));-webkit-mask:repeating-linear-gradient(90deg,#000 0 12px,transparent 12px 14px);mask:repeating-linear-gradient(90deg,#000 0 12px,transparent 12px 14px)}
.hww-step:nth-child(2) .hww-pill{--hww-n:50%}.hww-step:nth-child(3) .hww-pill{--hww-n:75%}.hww-step:nth-child(4) .hww-pill{--hww-n:100%}
.hww-step-t{margin:12px 0 18px;font-size:20.8px;font-weight:400;letter-spacing:-.3px;line-height:1.25;color:#111318}
.hww-its{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hww-it{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.hww-it-t{display:block;font-size:16px;font-weight:500;line-height:1.3;color:var(--ink)}
.hww-it-d{margin-top:8px;font-size:15px;line-height:1.45;color:#687586}
.hww-ok{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14px;line-height:1.5;color:var(--muted)}
.hww-chk{flex:none;position:relative;width:18px;height:18px;margin-top:1px;border:1px solid var(--hww-amber);border-radius:50%;background:#fff8ec}
.hww-chk::after{content:"";position:absolute;left:5px;top:4px;width:6px;height:3px;border-left:2px solid #d98200;border-bottom:2px solid #d98200;transform:rotate(-45deg)}
/* mobile: tabs centred, selector shows just the step numbers, one column of items, one step at a time */
@media (max-width:720px){
.hww-tabs{justify-content:center}
.hww-n b{font-size:0}
.hww-n b::before{content:counter(hn);font-size:17px;font-weight:600}
.hww-step{display:none}
.hww-step.is-on{display:block}
.hww-its{grid-template-columns:minmax(0,1fr)}
}
/* desktop (PC): step menu on the left, selected step as one large card on the right */
@media (min-width:1025px){
#how-we-work>.wrap{display:grid;grid-template-columns:340px minmax(0,1fr) auto;column-gap:28px;row-gap:44px;align-items:end}
.hww-head-row{grid-column:1/3;grid-row:1;margin-bottom:0}
.hww-head{min-width:0}
.hww-flow{display:contents}
.hww-tabs{grid-column:3;grid-row:1;margin-top:0}
.hww-nav{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-column:1;grid-row:2;align-self:center;align-content:start;margin-top:0;border-bottom:0}
.hww-n{display:block;width:100%;margin-bottom:0;padding:16px 0 16px 18px;border:0;border-bottom:1px solid #eceef2;text-align:left;color:var(--ink)}
.hww-n:last-child{border-bottom:0}
.hww-n b{font-size:16px;color:#8a919d;transition:color .2s ease}
.hww-n em{display:block;margin-top:3px;font-size:13.5px;font-style:normal;line-height:1.45;color:#a0a6b1;transition:color .2s ease}
.hww-n:hover b{color:var(--ink)}
.hww-n.is-on{border-bottom-color:#eceef2}
.hww-n.is-on b{color:var(--ink)}
.hww-n.is-on em{color:#687586}
.hww-n.is-on::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--hww-amber)}
.hww-panel{grid-column:2/4;grid-row:2;margin-top:0}
.hww-step{padding:34px;border-radius:22px}
.hww-pill{color:#6b7385}
.hww-step-t{margin:12px 0 20px}
.hww-its{gap:14px}
.hww-it{padding:20px;border-radius:16px}
.hww-step.is-on .hww-it{animation:hww-up .45s ease both}
.hww-step.is-on .hww-it:nth-child(2){animation-delay:.07s}.hww-step.is-on .hww-it:nth-child(3){animation-delay:.14s}
.hww-ok{margin-top:22px}
}
@keyframes hww-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hww-it{animation:none!important}.hww-n,.hww-n b,.hww-n em,.hww-tab{transition:none}}