/* Social Media page series (Thom, 24 Oct 2026): the step bar under the header and the Back / Next cards at the foot
   of /socialmedia/why, /how, /included, /pricing and the example pages. Every page leads back to /socialmedia. */
.sm-trail{margin-top:calc(var(--nav-h) + var(--sat));background:var(--paper);border-bottom:1px solid var(--rule)}
/* left edge lines up with the header logo (Thom, 24 Oct 2026) */
.sm-trail-in{padding:0 max(48px,env(safe-area-inset-right,0px)) 0 max(48px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:26px}
@media (max-width:900px){.sm-trail-in{padding:0 var(--gutr) 0 var(--gut)}}
.sm-home{flex:0 0 auto;display:flex;align-items:center;min-height:52px;padding-right:24px;border-right:1px solid var(--rule);
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.sm-home:hover,.sm-home:focus-visible{color:var(--green)}
.sm-trail ol{display:flex;gap:26px;list-style:none;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.sm-trail ol::-webkit-scrollbar{display:none}
.sm-trail li{flex:0 0 auto}
.sm-trail ol a{display:flex;align-items:center;gap:7px;min-height:52px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);text-decoration:none;white-space:nowrap}
.sm-trail ol a span{font-size:10.5px;color:var(--muted)}
.sm-trail ol a:hover,.sm-trail ol a:focus-visible{color:var(--ink)}
.sm-trail ol a[aria-current]{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--green)}
.sm-trail ol a[aria-current] span{color:var(--green)}
.sm-trail + .hero{padding-top:64px}
.sm-trail + .sec{padding-top:72px}

.sm-pager{background:var(--paper);border-top:1px solid var(--rule)}
.sm-pager-in{max-width:1180px;margin:0 auto;padding:32px var(--gutr) 32px var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sm-pager a{display:flex;flex-direction:column;gap:6px;padding:20px 24px;border:1px solid var(--rule);border-radius:var(--radius);
  font-family:var(--serif);font-size:23px;line-height:1.2;color:var(--ink);text-decoration:none;transition:border-color .18s,background .18s}
.sm-pager a small{font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sm-pager a:hover,.sm-pager a:focus-visible{border-color:var(--ink)}
.sm-pager a.next{align-items:flex-end;text-align:right;background:var(--night);border-color:var(--night);color:var(--on-night)}
.sm-pager a.next small{color:var(--green-on-dark)}
.sm-pager a.next:hover,.sm-pager a.next:focus-visible{background:#000}
@media (max-width:640px){
  .sm-trail-in{gap:16px}
  .sm-home{padding-right:16px}
  .sm-trail ol{gap:20px}
  .sm-pager-in{grid-template-columns:1fr}
  .sm-pager a.next{order:-1}
}

/* the first section heading on /socialmedia/why, /how and /included is the page's h1 (AEO pass, 24 Oct 2026) */
.head h1{font-size:clamp(32px,4.2vw,54px);margin-top:14px}