/* SEO sub-service pages v2 (page-templates/tpl-seo-sub-v2.php, inc/seo-sub-v2.php): Local SEO first. Loads after services-hub-v2.css (kit) and seo-v2.css (awards row, data tiles, steps, meeting band). Scoped to .ssub inside .sv2. Part above "below the fold" is inlined in . Reveal policy: nothing hidden, no entrances, hovers <= 150 ms. Rails: native horizontal scroll, no visible scrollbar, round prev/next buttons (assets/js/hv2-rail.js). */ /* ---------- hero: stacked H1 + rating strip + case fan ---------- */ .ssub .ssub-h1{max-width:15ch} .ssub .ssub-h1 em{display:block;width:fit-content} .ssub-rate{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px;font-size:14.5px;color:var(--on-navy)} .ssub-rate:hover b{color:var(--gold)} /* hover: only the bold rating/count turns gold; no underline under the wrapped chip (Matt, 2026-09-29) */ .ssub-rate b{color:#fff;font-size:16px;transition:color .15s} .ssub-stars{position:relative;display:inline-block;font-size:16px;line-height:1;letter-spacing:2px;white-space:nowrap} .ssub-stars .ex2-stars__bg{color:rgba(255,255,255,.22)} .ssub-stars .ex2-stars__fg{position:absolute;left:0;top:0;overflow:hidden;color:var(--gold)} .ssub-fan{position:relative;height:400px;max-width:600px;justify-self:center;width:100%} /* box fits the cards (top 40 + 302 card + tilt), so the grid's align-items:center lands the stack level with the copy (Mike 2026-09-28: "cases should be moved down a bit") */ .ssub-fan__c{position:absolute;top:40px;width:250px;aspect-ratio:1160/1400;border-radius:20px;overflow:hidden;background:var(--navy2);box-shadow:0 30px 60px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);transition:transform .15s,border-color .15s} .ssub-fan__c:hover{border-color:var(--gold)} .ssub-fan__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ssub-fan__shade{position:absolute;inset:45% 0 0;background:linear-gradient(180deg,rgba(var(--ss-navy-deep-rgb),0),rgba(var(--ss-navy-deep-rgb),.94) 70%)} .ssub-fan__bd{position:absolute;left:18px;right:16px;bottom:16px;display:grid;gap:3px;color:#fff} .ssub-fan__bd b{font-size:40px;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--gold)} .ssub-fan__bd span{font-size:13.5px;font-weight:700;line-height:1.3} .ssub-fan__bd i{font-style:normal;font-size:12px;color:var(--mist)} .ssub-fan--3 .ssub-fan__c--1{left:0;transform:rotate(-7deg) scale(.88);transform-origin:bottom right} .ssub-fan--3 .ssub-fan__c--2{left:50%;margin-left:-125px;top:0;z-index:2} .ssub-fan--3 .ssub-fan__c--3{right:0;transform:rotate(7deg) scale(.88);transform-origin:bottom left} /* side cards: the text sits in the part the front card leaves visible */ .ssub-fan--3 .ssub-fan__c--1 .ssub-fan__bd{right:32%}.ssub-fan--3 .ssub-fan__c--3 .ssub-fan__bd{left:32%;justify-items:end;text-align:right} .ssub-fan--3 .ssub-fan__c--1 .ssub-fan__bd b,.ssub-fan--3 .ssub-fan__c--3 .ssub-fan__bd b{font-size:32px} .ssub-fan--2 .ssub-fan__c--1{left:6%;transform:rotate(-5deg) scale(.92)} .ssub-fan--2 .ssub-fan__c--2{right:6%;top:10px;z-index:2} .ssub-hero--solo{grid-template-columns:1fr} .ssub-partners .sv2-strip__in{padding-block:18px 26px} .ssub-partners .sv2-logos img{height:30px} @media (max-width:1000px){.ssub-fan{height:360px}.ssub-fan__c{width:220px}.ssub-fan--3 .ssub-fan__c--2{margin-left:-110px}} @media (max-width:560px){ .ssub-fan{height:330px;margin-top:-8px}.ssub-fan__c{width:168px;top:24px;border-radius:16px}.ssub-fan--3 .ssub-fan__c--2{margin-left:-84px} .ssub-fan--3 .ssub-fan__c--1{left:-4px}.ssub-fan--3 .ssub-fan__c--3{right:-4px} .ssub-fan__bd{left:12px;right:10px;bottom:12px}.ssub-fan__bd b{font-size:28px}.ssub-fan__bd span{font-size:12px}.ssub-fan__bd i{font-size:11px} .ssub-partners .sv2-logos img{height:26px} .ssub-fan--3 .ssub-fan__c--1 .ssub-fan__bd,.ssub-fan--3 .ssub-fan__c--3 .ssub-fan__bd{display:none} } /* Reviews rail under the hero (config order "reviews_rail", template-parts/seo-v2-reviews.php, 2026-09-29) = the /organic-seo/ + /ppc-marketing/ rail: copy of the .svc2 .s-rv-sec rules in service-v2.css, scoped to .ssub (without them the cards stack full width). Above the fold: the rail inline geometry script needs them. */ .ssub .s-rv-sec.ex2-rc--standalone{background:#fff;color:var(--ink);padding:26px 0 16px;line-height:1.6} .ssub .s-rv-h{font-size:clamp(19px,1.45vw,24px);letter-spacing:-.01em;line-height:1.2;white-space:nowrap} @media (max-width:900px){.ssub .s-rv-h{white-space:normal}} .ssub .s-rv-sec .ex2-rc__card{height:auto;box-shadow:0 14px 30px rgba(var(--ss-navy-deep-rgb),.18)} .ssub .s-rv-sec .hv2-rail{--gut:32px;--cw:282px;position:relative;margin-top:-8px} @media (max-width:900px){.ssub .s-rv-sec .hv2-rail{--gut:24px}} @media (max-width:560px){.ssub .s-rv-sec .hv2-rail{--gut:16px;--cw:76vw}} .ssub .s-rv-sec .hv2-rail__track{--pad:var(--gut);display:grid;grid-auto-flow:column;grid-auto-columns:var(--cw);gap:var(--gap,20px);margin:0;padding:8px var(--pad) 12px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:none;scroll-padding-inline:var(--pad);scrollbar-width:none} .ssub .s-rv-sec .hv2-rail__track::-webkit-scrollbar{display:none} .ssub .s-rv-sec .hv2-rail__track:focus-visible{outline:3px solid var(--gold);outline-offset:-3px} .ssub .s-rv-sec .hv2-rail__track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none} .ssub .s-rv-sec .hv2-rail__track.is-drag a{pointer-events:none} .ssub .s-rv-sec .hv2-rail__item{scroll-snap-align:start;display:grid;min-width:0} .ssub .s-rv-sec .hv2-rail:before,.ssub .s-rv-sec .hv2-rail:after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;transition:opacity .15s} .ssub .s-rv-sec .hv2-rail:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));opacity:0} .ssub .s-rv-sec .hv2-rail:after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))} .ssub .s-rv-sec .hv2-rail.is-scrolled:before{opacity:1} .ssub .s-rv-sec .hv2-rail.is-end:after{opacity:0} .ssub .s-rv-sec .hv2-rail__btn{position:absolute;top:calc(50% - 2px);transform:translateY(-50%);z-index:3;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ss-navy);box-shadow:0 6px 18px rgba(var(--ss-navy-deep-rgb),.18);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s,background .15s} .ssub .s-rv-sec .hv2-rail__btn svg{width:18px;height:18px} .ssub .s-rv-sec .hv2-rail__btn--prev{left:76px} .ssub .s-rv-sec .hv2-rail__btn--next{right:76px} .ssub .s-rv-sec .hv2-rail:hover .hv2-rail__btn,.ssub .s-rv-sec .hv2-rail:focus-within .hv2-rail__btn{opacity:1} .ssub .s-rv-sec .hv2-rail__btn:hover{background:var(--gold);color:var(--ss-navy);border-color:var(--gold)} .ssub .s-rv-sec .hv2-rail .hv2-rail__btn:disabled{opacity:0;pointer-events:none} @media (hover:none),(max-width:760px){.ssub .s-rv-sec .hv2-rail__btn{display:none}} /* ==== below the fold ==== */ /* ---------- section heads: stacked (pill, H2, lede), never split ---------- */ .ssub-head{display:grid;gap:16px;justify-items:start;margin-bottom:40px;max-width:880px} .ssub-head .sv2-lede{max-width:64ch} .ssub-head--dark .sv2-h2 .hl{padding-bottom:.14em;margin-bottom:-.14em;padding-right:.06em;margin-right:-.06em;color:var(--gold);background:var(--ss-gold-shine);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .ssub-head .ss-eyebrow{margin:0} .ssub-head .sv2-h2 .hl{display:block;width:fit-content} /* alignment rule (Mike 2026-09-28): a head matches what it headlines. Every .ssub-head sits over full-width content (rails, symmetric grids, the tabs frame), so it is centred: two lines kept, intro <= 62ch under it. .ssub-head--l = left. */ .ssub-head{justify-items:center;text-align:center;margin-inline:auto} .ssub-head .sv2-h2 .hl{margin-inline:auto} .ssub-head .sv2-lede{max-width:62ch;margin-inline:auto} .ssub-head--l{justify-items:start;text-align:left;margin-inline:0} .ssub-head--l .sv2-h2 .hl{margin-inline:0} .ssub-more{text-align:center} .ssub-head:not(.ssub-head--l)~.ssub-note{margin-inline:auto;text-align:center} /* fine print under a centred section: centred */ .ssub-note{font-size:13px;color:var(--mist);margin-top:18px;max-width:90ch} .sv2-ground .ssub-note,.ssub-rv .ssub-note{color:var(--ink3)} /* ---------- results rail ---------- */ .ssub-rail{position:relative} .ssub-rail__ctl{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:-12px 0 18px} .ssub-arrows{display:flex;gap:10px} .ssub-arr{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s} .ssub-arr svg{width:16px;height:16px} .ssub-arr[data-dir="-1"] svg{transform:scaleX(-1)} .ssub-arr:hover:not(:disabled){border-color:var(--gold);color:var(--gold)} .ssub-arr:disabled{opacity:.35;cursor:default} /* full-bleed rail: geometry, arrows and snap come from the shared .ss-bleed rail (assets/css/ss-rail.css, inline in ; Mike 2026-09-28: every rail full-bleed both sides, same gutter, streaming-style arrows). Here: the arrow wrappers step aside. */ .ss-bleed .ssub-rail__ctl,.ss-bleed .ssub-arrows{display:contents} .ssub-cards{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0 6px;overscroll-behavior-x:contain} .ssub-cards::-webkit-scrollbar{display:none;height:0} .ssub-cards>li{flex:0 0 calc((100cqw - 60px)/4);min-width:0;scroll-snap-align:start} .ssub-card{display:grid;grid-template-rows:auto 1fr;height:100%;border-radius:20px;overflow:hidden;background:var(--navy2);border:1px solid var(--navy-line);color:#fff;transition:border-color .15s} .ssub-card:hover{border-color:var(--gold)} .ssub-card__im{position:relative;aspect-ratio:1160/1100;overflow:hidden} .ssub-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0} .ssub-card__im:after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(180deg,rgba(var(--ss-navy-rgb),0),var(--navy2) 88%)} .ssub-card__pl{position:absolute;left:12px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:5px;background:rgba(var(--ss-navy-deep-rgb),.82);color:#fff;font-size:12px;font-weight:700;padding:5px 10px 5px 8px;border-radius:99px} .ssub-card__pl svg{width:13px;height:13px;color:var(--gold)} .ssub-card__big{position:absolute;left:18px;right:14px;bottom:4px;z-index:1;display:grid;gap:2px} .ssub-card__big b{font-size:46px;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--gold)} .ssub-card__big small{font-size:13.5px;font-weight:700;line-height:1.3;color:#fff} .ssub-card__bd{padding:12px 18px 20px;display:grid;gap:10px;align-content:start} .ssub-card__cat{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);line-height:1.4} .ssub-card__kw{display:flex;align-items:center;gap:8px;background:#fff;color:var(--ss-navy-line);border-radius:99px;padding:7px 12px;font-size:13px;font-weight:600;line-height:1.2;box-shadow:0 1px 0 rgba(0,0,0,.2)} .ssub-card__kw svg{width:14px;height:14px;color:var(--ss-ink-2);flex:none} .ssub-card__st{display:grid;gap:6px;border-top:1px solid var(--navy-line);padding-top:10px;font-size:13px;color:var(--on-navy);line-height:1.35} .ssub-card__st b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums} @media (max-width:1100px){.ssub-cards>li{flex-basis:calc((100cqw - 40px)/3)}} @media (max-width:800px){.ssub-cards>li{flex-basis:calc((100cqw - 20px)/2)}} @media (max-width:560px){.ssub-cards{gap:14px}.ssub-cards>li{flex-basis:78cqw}.ssub-rail__ctl{margin-top:-8px}.ssub-card__big b{font-size:40px}} /* ---------- own data ---------- */ .ssub-dh{padding-block:88px 56px} .ssub-dh .ssub-head{margin-bottom:8px} .ssub-bandh{margin-top:36px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)} .ssub-vol{margin-top:14px} .ssub-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .ssub-tiles .d-t{height:100%} .ssub-t--wide{grid-column:span 2} .ssub-tiles .d-t .big small{font-size:.36em} .ssub-tiles .hm__chart{margin-top:4px} .ssub-tiles .hm__hb li{grid-template-columns:110px minmax(0,1fr) 54px} .ssub-tiles .hm__hb span{color:var(--ink2)} .ssub-tiles .hm__hb i{background:var(--ground)} .ssub-tiles .hm__hb em{background:var(--navy3)} .ssub-tiles .hm__hb b{color:var(--ss-navy-deep)} @media (max-width:1000px){.ssub-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.ssub-tiles{grid-template-columns:1fr}.ssub-t--wide{grid-column:auto}} /* ---------- Client Hub recreations (dark Hub UI: cs-work/hub-shots/hub-google-ads-1440.png) ---------- */ .ssub-hubgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .ssub-hv figure{display:grid;gap:14px} .ssub-hv figcaption{font-size:14.5px;color:var(--on-navy);line-height:1.5;max-width:60ch} .ssub-hv figcaption b{display:block;color:#fff;font-size:17px;margin-bottom:2px} .ssub-note--hub{margin-top:24px} .hm{--hb:#0d111d;--hs:#131a2b;--hc:#171e31;--hl:#273049;--ht:#e9edf5;--hm:#8d97ad;--hg:var(--ss-gold);border-radius:16px;overflow:hidden;background:var(--hb);border:1px solid #2a3350;box-shadow:0 24px 60px rgba(0,0,0,.4);font-family:Inter,"Helvetica Neue",Arial,sans-serif;color:var(--ht);user-select:none} .hm__bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--hs);border-bottom:1px solid var(--hl)} .hm__logo{font-size:13px;font-weight:800;letter-spacing:-.01em;color:#fff} .hm__logo i{font-style:normal;color:var(--hg)} .hm__logo b{font-weight:700;margin-left:4px} .hm__dots{display:flex;gap:5px}.hm__dots i{width:7px;height:7px;border-radius:50%;background:#2c3551} .hm__in{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:330px} .hm__nav{background:var(--hs);border-right:1px solid var(--hl);padding:12px 8px;display:grid;gap:3px;align-content:start} .hm__nav li{font-size:11.5px;color:var(--hm);padding:7px 9px;border-radius:7px;line-height:1.25} .hm__nav li.on{background:#1f2740;color:#fff;box-shadow:inset 3px 0 0 var(--hg)} .hm__main{padding:14px 16px 16px;display:grid;gap:10px;align-content:start;min-width:0} .hm__t{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.2} .hm__s{font-size:11.5px;color:var(--hm);margin-top:-6px} .hm__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px} .hm__kpi{background:var(--hc);border:1px solid var(--hl);border-radius:9px;padding:8px 10px;display:grid;gap:2px;min-width:0} .hm__kpi span{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hm__kpi b{white-space:nowrap;font-size:19px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .hm__chart{background:var(--hc);border:1px solid var(--hl);border-radius:10px;padding:10px 12px 8px;min-width:0} .hm__cap{font-size:10.5px;color:var(--hm);margin-bottom:6px} .hm__bars,.hm__line{width:100%;height:auto;display:block} .hm__bars rect{fill:var(--hg)} .hm__bars text,.hm__line text{font:600 8.5px Inter,Arial,sans-serif;fill:var(--hm);text-anchor:middle} .hm__line text[text-anchor="start"]{text-anchor:start}.hm__line text[text-anchor="end"]{text-anchor:end} .hm__line .l{fill:none;stroke:var(--hg);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .hm__line .a{fill:rgba(var(--ss-gold-rgb),.12);stroke:none} .hm__line circle{fill:var(--hg);stroke:var(--hc);stroke-width:2} .hm__hb{display:grid;gap:6px} .hm__hb li{display:grid;grid-template-columns:92px minmax(0,1fr) 44px;gap:8px;align-items:center;font-size:11px} .hm__hb span{color:var(--ht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hm__hb i{height:9px;border-radius:5px;background:#222a41;overflow:hidden;display:block} .hm__hb em{display:block;height:100%;border-radius:5px;background:var(--hg)} .hm__hb b{text-align:right;color:#fff;font-weight:700;font-variant-numeric:tabular-nums} .hm__split{height:12px;border-radius:6px;background:#3a4566;overflow:hidden} .hm__split i{display:block;height:100%;background:var(--hg)} .hm__legend{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--hm)} .hm__legend .a{color:var(--hg);font-weight:700} @media (max-width:1000px){.ssub-hubgrid{grid-template-columns:1fr}} @media (max-width:560px){.hm__in{grid-template-columns:1fr}.hm__nav{display:flex;gap:4px;overflow:hidden;padding:8px;border-right:0;border-bottom:1px solid var(--hl)}.hm__nav li{white-space:nowrap;padding:5px 8px;font-size:10.5px}.hm__nav li:not(.on){display:none}.hm__in{min-height:0}.hm__kpi b{font-size:17px}} /* ---------- reviews grid: minimal cards, photo first ---------- */ .ssub-rvgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .ssub-rc{background:var(--ss-navy);border:0;border-radius:18px;padding:22px 22px 18px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;min-width:0;box-shadow:0 16px 34px -14px rgba(var(--ss-navy-deep-rgb),.45)} .ssub-rc .ssub-stars{font-size:15px} .ssub-rc .ssub-stars .ex2-stars__bg{color:rgba(255,255,255,.22)} .ssub-rc blockquote{font-size:15.5px;line-height:1.55;color:var(--ss-snow)} .ssub-rc figcaption{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;min-width:0} .ssub-rc figcaption>span:last-child{display:grid;min-width:0;font-size:13.5px;color:var(--ss-mist);line-height:1.35} .ssub-rc figcaption b{font-size:15px;color:#fff} .ssub-rc figcaption a{color:var(--ss-mist);text-decoration:underline;text-decoration-color:rgba(var(--ss-gold-rgb),.45);text-underline-offset:3px;transition:color .15s} .ssub-rc figcaption a:hover{color:var(--gold)} .ssub-rc__av{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:var(--ss-navy-deep);color:var(--gold);display:grid;place-items:center;font-size:14px;font-weight:800} .ssub-rc__av>img:first-child{width:44px;height:44px;border-radius:50%;object-fit:cover} .ssub-rc__av--logo{background:var(--ss-navy);border:1px solid rgba(255,255,255,.14)} /* client logos are the WHITE versions: never on a white disc (Mike 2026-09-28) */ .ssub-rc__av--logo img:first-child{object-fit:contain;padding:6px;border-radius:50%} .ssub-rc__src{position:absolute;right:-4px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--ss-navy)} .ssub-more{margin-top:26px} @media (max-width:1000px){.ssub-rvgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.ssub-rvgrid{grid-template-columns:1fr}.ssub-rc{padding:18px 18px 16px}} /* ---------- what's included: journey-style steps ---------- */ .ssub-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:none} .ssub-step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 22px 20px;display:grid;gap:10px;align-content:start;min-width:0;transition:border-color .15s,box-shadow .15s} .ssub-step:hover{border-color:var(--gold);box-shadow:0 14px 40px rgba(var(--ss-navy-deep-rgb),.08)} .ssub-step__top{display:flex;justify-content:space-between;align-items:center} .ssub-step__ic{width:48px;height:48px;border-radius:13px;background:var(--ss-navy-deep);color:var(--gold);display:grid;place-items:center} .ssub-step__ic svg{width:24px;height:24px} .ssub-step__n{font-size:13px;font-weight:800;color:var(--ink3);font-variant-numeric:tabular-nums;letter-spacing:.06em} .ssub-step .ssub-step__tag{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-top:4px} .ssub-step h3{font-size:20px;font-weight:800;line-height:1.25} .ssub-step p{font-size:15px;color:var(--ink2)} .ssub-step .ssub-step__hub{font-size:13.5px;background:var(--ground);border-radius:12px;padding:10px 12px} .ssub-step__hub b{color:var(--ink)} .ssub-step__lk{display:flex;flex-wrap:wrap;gap:6px 14px} .ssub-step__lk a{font-size:13px;font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--gold);transition:color .15s} .ssub-step__lk a:hover{color:var(--gold-ink)} @media (max-width:1000px){.ssub-steps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.ssub-steps{grid-template-columns:1fr}} /* How we report (config order "compare"): proof line on the grey band, as on /organic-seo/ (base rule is white-on-navy) */ .ssub .s-cmp-sec .sv2-cmp-proof{color:var(--ink2)} .ssub .s-cmp-sec .sv2-cmp-proof b{color:var(--ink)} .ssub .s-cmp-sec .sv2-cmp-proof i{color:var(--gold-ink)} /* Own-data stats band (config order "stats", template-parts/stats-band.php; GBP page 2026-09-30): the heading in the kit h2 size + weight */ .ssub .ssub-stats .ss-stats__head h2{font-size:clamp(30px,3.6vw,46px);font-weight:700;line-height:1.1;letter-spacing:normal}