/* PPC "Beyond the platforms" extras + "Landing pages that convert" (template-parts/svc2-extras.php, Option 4 of the
   extras mock, Mike 2026-09-28). Tiles and browser frames use the "for your business" selector card treatment
   (seo-zig-v2.css .szig-sel__c): 1.5px line-strong border, 18px radius, soft shadow; gold border + 2px lift on hover.
   Transitions 150 ms, nothing hidden on load. Phones: tiles 2x2 (title only), landing pages become a snap rail. */

.svc2-ext{margin-top:56px}
.svc2-ext__top{margin-bottom:24px;display:grid;justify-items:center;text-align:center}
.svc2-ext__top .svc2-ext__lede,.svc2-ext__lph .svc2-ext__lede{margin-inline:auto;max-width:62ch}
.svc2-ext__h .hl,.svc2-ext__h3 .hl{margin-inline:auto}
.sv2-sec.ssub-inc:has(+ .svc2-ext-sec){padding-bottom:64px}
.ssub-inc+.svc2-ext-sec{padding-top:64px}
@media (max-width:760px){.sv2-sec.ssub-inc:has(+ .svc2-ext-sec){padding-bottom:44px}.ssub-inc+.svc2-ext-sec{padding-top:44px}}
.svc2 .svc2-ext__h{font-size:clamp(30px,3.6vw,46px)} /* same scale as every section .sv2-h2 (services-hub-v2.css), copy audit 2026-09-29 */
.svc2 .svc2-ext__h3{font-size:clamp(24px,2.2vw,30px)}
.svc2 .svc2-ext__h3.svc2-ext__h3--lead{font-size:clamp(30px,3.6vw,46px)} /* the emails card heads the Email band: section scale */
.svc2-ext__h .hl,.svc2-ext__h3 .hl{display:block;width:fit-content}
.svc2 .svc2-ext__lede{margin-top:10px;font-size:18px;max-width:560px}

/* shared card treatment */
.svc2-ext__t,.svc2-ext__bw{background:#fff;border:1.5px solid var(--ss-line-strong);border-radius:18px;box-shadow:0 6px 18px -12px rgba(var(--ss-navy-deep-rgb),.45);transition:border-color .15s,box-shadow .15s,transform .15s}
.svc2-ext__t:hover,.svc2-ext__lp:hover .svc2-ext__bw{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 24px rgba(var(--ss-navy-deep-rgb),.08)}
.svc2-ext__t:focus-visible,.svc2-ext__lp:focus-visible{outline:3px solid var(--navy2);outline-offset:3px}

/* tile row */
.svc2-ext__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.svc2-ext__tiles li{display:flex;margin:0}
.svc2-ext__t{flex:1;display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.svc2-ext__ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--gold-soft);color:var(--ss-gold-end)}
.svc2-ext__ic svg{width:20px;height:20px}
.svc2-ext__tx{min-width:0}
.svc2-ext__tx b{display:block;font-size:16px;font-weight:700;line-height:1.2}
.svc2-ext__tx>span{display:block;margin-top:2px;font-size:14px;line-height:1.35;color:var(--ink3)}
.svc2-ext__t{position:relative}
.svc2-ext__new{position:absolute;top:-10px;right:14px;display:inline-block;padding:2px 7px;border-radius:999px;background:var(--green-soft);color:var(--green);font:700 11px/1.3 var(--font);font-style:normal;vertical-align:2px}
.svc2-ext__t>svg{flex:none;width:16px;height:16px;margin-left:auto;color:var(--ss-gold-deep)}

/* landing pages card */
.svc2-ext__lps{margin-top:56px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px}
.svc2-ext__lph{display:flex;justify-content:center;text-align:center;gap:24px;margin-bottom:28px}
.svc2-ext__lph .svc2-ext__btn{display:none}
.svc2-ext__btn{flex:none;padding:15px 24px;font-size:15px}
.svc2-ext__btn svg{width:16px;height:16px}
.svc2-ext__rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.svc2-ext__rail li{margin:0;min-width:0}
.svc2-ext__lp{display:block;text-decoration:none;color:var(--ink)}
.svc2-ext__bw{display:block;overflow:hidden}
.svc2-ext__bar{display:flex;align-items:center;gap:5px;height:28px;padding:0 12px;background:var(--ground);border-bottom:1px solid var(--line)}
.svc2-ext__bar i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ss-line-strong)}
.svc2-ext__bar em{flex:1;min-width:0;margin-left:8px;height:16px;padding:0 9px;border-radius:8px;background:#fff;font:500 10.5px/16px var(--font);font-style:normal;color:var(--ink3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.svc2-ext__bw img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.svc2-ext__cap{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-top:14px}
.svc2-ext__cap b{display:block;font-size:17px;font-weight:700;line-height:1.2}
.svc2-ext__cap>span>span{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--ink3)}
.svc2-ext__st{flex:none;text-align:right}
.svc2-ext__st strong{display:block;font-size:19px;font-weight:800;line-height:1.1;color:var(--ink)}
.svc2-ext__st strong:before{content:"";display:inline-block;margin-right:5px;border:5px solid transparent;border-top:0;border-bottom:8px solid var(--green);vertical-align:2px}
.svc2-ext__mcta{display:flex;justify-content:center;margin-top:28px}

@media (max-width:1100px){
  .svc2-ext__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .svc2-ext__lps{padding:28px 24px}
  .svc2-ext__lph{display:block}
  .svc2-ext__lph .svc2-ext__btn{display:none}
  .svc2-ext__rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -24px;padding:4px 24px 14px;scroll-padding-inline:24px;scrollbar-width:none}
  .svc2-ext__rail::-webkit-scrollbar{display:none}
  .svc2-ext__rail li{flex:0 0 46%;scroll-snap-align:start}
  .svc2-ext__mcta{display:flex;justify-content:center;margin-top:14px}
}
@media (max-width:640px){
  .svc2-ext{margin-top:40px}
  .svc2-ext__top{margin-bottom:16px}
  .svc2-ext__tiles{gap:8px}
  .svc2-ext__t{padding:12px;gap:10px;border-radius:14px}
  .svc2-ext__tx>span,.svc2-ext__t>svg{display:none}
  .svc2-ext__tx b{font-size:14.5px}
  .svc2-ext__new{position:static;display:table;margin:4px 0 0}
  .svc2-ext__ic{width:34px;height:34px;border-radius:9px}
  .svc2-ext__ic svg{width:18px;height:18px}
  .svc2-ext__lps{margin:36px -24px 0;border-radius:0;border-left:0;border-right:0;padding:28px 16px}
  .svc2-ext__rail{margin:0 -16px;padding:4px 16px 14px;gap:12px;scroll-padding-inline:16px}
  .svc2-ext__rail li{flex:0 0 82%}
  .svc2-ext__bw{border-radius:14px}
}
@media (max-width:560px){ /* .sv2-w gutter: 24px to 560px, 16px below */
  .svc2-ext__lps{margin-inline:-16px}
}
@media (prefers-reduced-motion:reduce){.svc2-ext__t,.svc2-ext__bw{transition:none}}

/* section mode (template-parts/lp-showcase.php 'section' => true; Landing Page Design sub-page, config "lps"): no card, the
   frames sit on the section's light ground; centred stacked two-tone head; phones: the snap rail runs to the .sv2-w gutter */
.svc2-ext__lps--sec{margin:0;padding:0;background:none;border:0;border-radius:0}
.svc2-ext__lps--sec .svc2-ext__lph{margin-bottom:40px}
.svc2-ext__hs .hl{display:block;width:fit-content;margin-inline:auto}
.svc2-ext__lps--sec .svc2-ext__rail{row-gap:36px}
.svc2-ext__lps--sec .svc2-ext__lede{text-wrap:balance}
@media (max-width:900px){.svc2-ext__lps--sec{padding:0}.svc2-ext__lps--sec .svc2-ext__lph{margin-bottom:28px}}
@media (max-width:640px){.svc2-ext__lps--sec{margin:0}.svc2-ext__lps--sec .svc2-ext__rail{margin:0 -24px;padding:4px 24px 14px;scroll-padding-inline:24px}}
@media (max-width:560px){.svc2-ext__lps--sec{margin-inline:0}.svc2-ext__lps--sec .svc2-ext__rail{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}}

/* posts showcase (Social 2026-09-28, children.extras.posts): real post graphics, 4 x 2 grid of 4:5 cards; phones: 2 across */
.svc2-ext__pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.svc2-ext__pgrid li{margin:0;min-width:0}
.svc2-ext__post{display:block;text-decoration:none;color:var(--ink)}
.svc2-ext__pim{display:block;overflow:hidden;background:#fff;border:1.5px solid var(--ss-line-strong);border-radius:18px;box-shadow:0 6px 18px -12px rgba(var(--ss-navy-deep-rgb),.45)} /* hover / focus: the image box scales 1.03 with a gold ring (ss-tile-hover.css) */
.svc2-ext__pim img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.svc2-ext__pim{position:relative}
.svc2-ext__pim video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#0d1b2a}
.svc2-ext__reel{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 8px;border-radius:999px;background:rgba(10,20,35,.72);color:#fff;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;pointer-events:none}
.svc2-ext__reel::before{content:"";width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff}
.svc2-ext__post b{display:block;margin-top:10px;font-size:15px;font-weight:700;line-height:1.25;text-align:center}
@media (max-width:900px){.svc2-ext__pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
/* Seam (2026-09-29): as the first block of the extras section the showcase card has no block above it to clear, so its 56px
   top margin only widened the section seam (Email Marketing: 184px from the tabs card to "Emails built around one offer"). */
.svc2-ext>.svc2-ext__lps:first-child{margin-top:0}