/* //////////////////////////////////////////////////////////////////////////

   SEO Heatmap layer on top of Maido

   Recreates the look of www.getseoheatmap.com. Source of truth for every value
   here: seo-dashboard-pro/src/index.css and tailwind.config.ts (Tailwind
   classes are noted where a rule mirrors one). Maido sets html to 62.5%, so
   this file uses px, never rem.

   ////////////////////////////////////////////////////////////////////////// */

/* Plus Jakarta Sans @font-face rules live in partials/services/fonts.hbs (versioned URLs that match the preloads). */

/* Ghost injects the admin accent colour on :root; html:root wins on specificity. */
html:root {
   --ghost-accent-color: #ff4801;
}

:root {
   --shm-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
   --shm-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

   --shm-text: #0f0f0f;            /* the main site forces gray-500..800 to this */
   --shm-heading: #111827;         /* gray-900 */
   --shm-muted: #71717a;           /* --muted-foreground */
   --shm-faint: #9ca3af;           /* gray-400 */
   --shm-line: #f3f4f6;            /* gray-100 */
   --shm-line-strong: #e5e7eb;     /* gray-200 */
   --shm-card-border: hsl(240, 6%, 94%);
   --shm-orange: #ff4801;          /* --primary */
   --shm-accent-bg: hsl(27, 96%, 95%);
   --shm-accent-fg: hsl(27, 96%, 35%);

   --shm-red: hsl(0, 100%, 64%);
   --shm-rorange: hsl(27, 96%, 61%);
   --shm-yellow: hsl(45, 100%, 60%);
   --shm-green: hsl(142, 76%, 46%);
   --shm-blue: hsl(217, 91%, 60%);
   --shm-indigo: hsl(239, 84%, 67%);
   --shm-violet: hsl(280, 87%, 65%);

   --shm-rainbow-line: linear-gradient(90deg, var(--shm-red) 0%, var(--shm-rorange) 17%, var(--shm-yellow) 33%, var(--shm-green) 50%, var(--shm-blue) 67%, var(--shm-indigo) 83%, var(--shm-violet) 100%);
   --shm-rainbow-text: linear-gradient(90deg, var(--shm-red) 0%, var(--shm-rorange) 20%, var(--shm-yellow) 40%, var(--shm-green) 60%, var(--shm-blue) 80%, var(--shm-violet) 100%);
   --shm-rainbow-button: linear-gradient(180deg, var(--shm-red) 0%, var(--shm-rorange) 20%, var(--shm-yellow) 40%, var(--shm-green) 60%, var(--shm-blue) 80%, var(--shm-violet) 100%);

   --shm-radius: 16px;             /* rounded-2xl */
   --shm-radius-button: 9px;       /* calc(--radius - 7px) */
   --shm-shadow-card: 0 1px 2px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02), 0 8px 16px rgba(0, 0, 0, .02), 0 16px 32px rgba(0, 0, 0, .03);
   --shm-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .02), 0 8px 16px rgba(0, 0, 0, .04), 0 16px 32px rgba(0, 0, 0, .04), 0 24px 48px rgba(0, 0, 0, .04);
   --shm-mesh: radial-gradient(at 40% 20%, hsla(27, 96%, 61%, .08) 0, transparent 50%),
      radial-gradient(at 80% 0%, hsla(280, 87%, 65%, .06) 0, transparent 50%),
      radial-gradient(at 0% 50%, hsla(217, 91%, 60%, .05) 0, transparent 50%),
      radial-gradient(at 80% 50%, hsla(142, 76%, 46%, .05) 0, transparent 50%),
      radial-gradient(at 0% 100%, hsla(45, 100%, 60%, .06) 0, transparent 50%);
}

/* Base
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Tailwind's preflight; Maido leaves elements content-box, which pushes padded containers past the viewport. */
body.shm *,
body.shm *::before,
body.shm *::after {
   box-sizing: border-box;
}

/* Maido pins html/body to 100% height, which would make the sticky header stop after one screen. */
html,
body.shm {
   height: auto;
   max-height: none;
}

body.shm {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   font-family: var(--shm-font);
   font-size: 16px;
   line-height: 1.5;
   color: var(--shm-text);
   background-color: #fff;
}

.shm h1,
.shm h2,
.shm h3,
.shm h4 {
   font-family: var(--shm-font);
   letter-spacing: -0.02em;
}

.shm-main {
   flex: 1 0 auto;
}

/* Tailwind .container + px-4 md:px-6 */
.shm-container {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
   padding-right: 16px;
   padding-left: 16px;
}

@media (min-width: 640px) { .shm-container { max-width: 640px; } }
@media (min-width: 768px) { .shm-container { max-width: 768px; padding-right: 24px; padding-left: 24px; } }
@media (min-width: 1024px) { .shm-container { max-width: 1024px; } }
@media (min-width: 1280px) { .shm-container { max-width: 1280px; } }
@media (min-width: 1400px) { .shm-container { max-width: 1400px; } }

@media (min-width: 1152px) { .shm-container-narrow { max-width: 1152px; } }

.shm-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.shm-rainbow-text {
   color: transparent;
   background: var(--shm-rainbow-text);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.shm-rainbow-line {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   height: 4px;
   border-radius: 2px;
   background: var(--shm-rainbow-line);
}

/* Buttons (.btn-rainbow, .btn-rainbow-outline)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-btn-rainbow,
.shm-btn-outline {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin: 0;
   white-space: nowrap;
   font-family: var(--shm-font);
   border-radius: var(--shm-radius-button);
   cursor: pointer;
   transition: filter .15s ease, color .15s ease;
   -webkit-appearance: none;
   appearance: none;
}

.shm-btn-rainbow {
   font-weight: 700;
   color: #fff;
   text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
   background: var(--shm-rainbow-button);
   border: 0;
}

.shm-btn-rainbow:hover,
.shm-btn-rainbow:focus-visible {
   color: #fff;
   filter: brightness(.85);
}

.shm-btn-rainbow:active {
   filter: brightness(.75);
}

.shm-btn-outline {
   height: 48px;
   padding: 0 32px;
   font-size: 16px;
   font-weight: 600;
   color: var(--shm-text);
   border: 2px solid transparent;
   background-image: linear-gradient(#fff, #fff), var(--shm-rainbow-button);
   background-origin: border-box;
   background-clip: padding-box, border-box;
}

.shm-btn-outline:hover,
.shm-btn-outline:focus-visible {
   color: #fff;
   background-image: var(--shm-rainbow-button);
}

.shm-btn-sm { height: 36px; padding: 0 20px; font-size: 16px; }
.shm-btn-lg { height: 48px; padding: 0 32px; font-size: 16px; }
.shm-btn-xl { height: 56px; padding: 0 32px; font-size: 18px; }

/* Header (TopNav)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-header {
   position: sticky;
   top: 0;
   z-index: 50;
   width: 100%;
   background-color: rgba(255, 255, 255, .8);
   border-bottom: 1px solid var(--shm-line);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
   -webkit-backdrop-filter: blur(24px);
   backdrop-filter: blur(24px);
}

.shm-header-inner {
   display: flex;
   align-items: center;
   height: 64px;
}

.shm-header-logo {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   margin-right: 32px;
}

.shm-logo {
   display: flex;
   align-items: center;
   gap: 10px;
}

.shm-logo-mark {
   position: relative;
   width: 32px;
   height: 32px;
   flex-shrink: 0;
}

.shm-logo-mark img {
   position: absolute;
   inset: 0;
   width: 32px;
   height: 32px;
   transition: opacity .3s;
}

.shm-logo-spectrum,
a:hover > .shm-logo .shm-logo-mono {
   opacity: 0;
}

a:hover > .shm-logo .shm-logo-spectrum {
   opacity: 1;
}

.shm-logo-text {
   white-space: nowrap;
   font-size: 20px;
   line-height: 28px;
   font-weight: 700;
   letter-spacing: -0.025em;
   color: var(--shm-heading);
}

.shm-header-nav {
   display: none;
   flex: 1;
   align-items: center;
   gap: 32px;
}

/* The main site shows these links from 768px, but they only fit from 1024px (the blog adds a search icon). */
@media (min-width: 1024px) {
   .shm-header-nav { display: flex; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
   .shm-header-logo { margin-right: 20px; }
   .shm-header-nav { gap: 18px; margin-right: 12px; }
   .shm-header-actions { gap: 8px; }
   .shm-nav-link { font-size: 15px; }
   .shm-signin { padding: 8px 6px; font-size: 15px; }
   .shm-header-actions .shm-btn-sm { padding: 0 16px; font-size: 15px; }
}

.shm-nav-link {
   position: relative;
   white-space: nowrap;
   font-size: 16px;
   line-height: 24px;
   font-weight: 500;
   color: var(--shm-text);
   transition: color .15s;
}

.shm-nav-link:hover {
   color: var(--shm-heading);
}

/* .nav-link-rainbow; the blog also keeps it on for "Knowledge" to mark where you are */
.shm-nav-link::after {
   content: '';
   position: absolute;
   right: 0;
   bottom: -4px;
   left: 0;
   height: 2px;
   border-radius: 1px;
   background: var(--shm-rainbow-line);
   opacity: 0;
   transform: scaleX(0);
   transition: opacity .2s ease, transform .2s ease;
}

.shm-nav-link:hover::after,
.shm-nav-link.is-active::after {
   opacity: 1;
   transform: scaleX(1);
}

.shm-header-actions {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-left: auto;
}

.shm-search-button {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   padding: 0;
   color: var(--shm-text);
   background: transparent;
   border: 0;
   border-radius: var(--shm-radius-button);
   cursor: pointer;
   transition: background-color .15s;
}

.shm-search-button:hover {
   background-color: #f4f4f5;
}

.shm-search-button svg {
   width: 17px;
   height: 17px;
   fill: currentColor;
}

.shm-signin {
   display: none;
   white-space: nowrap;
   padding: 8px 12px;
   font-size: 16px;
   font-weight: 500;
   color: var(--shm-text);
   transition: color .15s;
}

.shm-signin:hover {
   color: var(--shm-heading);
}

@media (min-width: 640px) {
   .shm-signin { display: block; }
}

/* Phones get the main site's layout: logo + "Get started free" only. */
@media (max-width: 479px) {
   .shm-header-logo { margin-right: 12px; }
   .shm-search-button { display: none; }
}

@media (max-width: 374px) {
   .shm-logo-text { font-size: 18px; }
   .shm-header-actions .shm-btn-sm { padding: 0 14px; font-size: 15px; }
}

/* Footer
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-footer {
   flex-shrink: 0;
   padding: 48px 0;
   background-color: #fff;
   border-top: 1px solid var(--shm-line);
}

.shm-footer-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

@media (min-width: 768px) {
   .shm-footer-inner { flex-direction: row; }
}

.shm-footer-nav {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 8px 24px;
}

.shm-footer-nav a {
   font-size: 14px;
   line-height: 20px;
   font-weight: 500;
   color: var(--shm-text);
   transition: color .15s;
}

.shm-footer-nav a:hover {
   color: var(--shm-heading);
}

.shm-footer-copyright {
   margin: 0;
   font-size: 14px;
   line-height: 20px;
   color: var(--shm-faint);
   white-space: nowrap;
}

/* Hero (index, tag, author, error)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-hero {
   position: relative;
   padding: 64px 0 72px;
   background-color: #fff;
   background-image: var(--shm-mesh);
}

@media (min-width: 768px) {
   .shm-hero { padding: 96px 0 104px; }
}

.shm-hero-inner {
   max-width: 896px;
   text-align: center;
}

.shm-hero-title {
   margin: 0 0 20px;
   font-size: 36px;
   line-height: 1.1;
   font-weight: 800;
   letter-spacing: -0.025em;
   color: var(--shm-heading);
}

@media (min-width: 768px) { .shm-hero-title { font-size: 48px; } }
@media (min-width: 1024px) { .shm-hero-title { font-size: 60px; } }

.shm-hero-subtitle {
   max-width: 672px;
   margin: 0 auto;
   font-size: 18px;
   line-height: 1.625;
   color: var(--shm-text);
}

@media (min-width: 768px) { .shm-hero-subtitle { font-size: 20px; } }

.shm-hero.is-small {
   padding: 56px 0 64px;
}

@media (min-width: 768px) {
   .shm-hero.is-small { padding: 72px 0 80px; }
   .shm-hero.is-small .shm-hero-title { font-size: 44px; }
}

@media (min-width: 1024px) {
   .shm-hero.is-small .shm-hero-title { font-size: 52px; }
}

.shm-hero.is-small .shm-hero-subtitle {
   font-size: 18px;
}

/* the hero's "New" pill: rounded-full, orange-200 border */
.shm-eyebrow {
   display: inline-flex;
   align-items: center;
   margin-bottom: 20px;
   padding: 4px 12px;
   font-size: 14px;
   line-height: 20px;
   font-weight: 500;
   color: var(--shm-text);
   background-color: rgba(255, 255, 255, .8);
   border: 1px solid #fed7aa;
   border-radius: 999px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.shm-hero-count {
   margin: 20px 0 0;
   font-size: 15px;
   font-weight: 500;
   color: var(--shm-muted);
}

.shm-hero-count a {
   color: var(--shm-text);
   text-decoration: underline;
   text-decoration-color: var(--shm-orange);
   text-underline-offset: 3px;
}

.shm-author-image {
   display: block;
   width: 96px;
   height: 96px;
   margin: 0 auto 20px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: var(--shm-shadow-card);
}

.shm-error-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 16px;
   margin-top: 40px;
}

/* Cards (.clay-card-hover)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-loop {
   padding: 48px 0 24px;
}

@media (min-width: 768px) {
   .shm-loop { padding: 64px 0 32px; }
}

.shm-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 24px;
}

@media (min-width: 768px) { .shm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .shm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.shm-card {
   position: relative;
   display: flex;
   flex-direction: column;
   padding: 24px;
   background-color: #fff;
   border: 1px solid var(--shm-card-border);
   border-radius: var(--shm-radius);
   box-shadow: var(--shm-shadow-card);
   transition: box-shadow .3s, transform .3s;
}

.shm-card:hover {
   box-shadow: var(--shm-shadow-card-hover);
   transform: translateY(-2px);
}

.shm-breadcrumb {
   position: relative;
   z-index: 1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 4px 8px;
   margin-bottom: 14px;
   font-size: 14px;
   font-weight: 600;
   color: var(--shm-muted);
}

.shm-breadcrumb a {
   color: var(--shm-muted);
   transition: color .15s;
}

.shm-breadcrumb a:hover {
   color: var(--shm-orange);
}

.shm-breadcrumb-sep {
   color: var(--shm-faint);
}

.shm-tags {
   position: relative;
   z-index: 1;
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 16px;
}

.shm-tag,
.shm-badge {
   display: inline-flex;
   align-items: center;
   height: 24px;
   padding: 0 10px;
   font-size: 12px;
   line-height: 1;
   font-weight: 600;
   border-radius: 999px;
}

.shm-tag {
   color: var(--shm-accent-fg);
   background-color: var(--shm-accent-bg);
   transition: background-color .15s;
}

.shm-tag:hover {
   color: var(--shm-accent-fg);
   background-color: hsl(27, 96%, 90%);
}

.shm-badge {
   color: #fff;
   background-color: var(--shm-orange);
}

.shm-card-title {
   margin: 0 0 10px;
   font-size: 20px;
   line-height: 1.3;
   font-weight: 700;
   color: var(--shm-heading);
}

.shm-card-title a {
   color: inherit;
}

/* the whole card is clickable; tags sit above this layer */
.shm-card-title a::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: var(--shm-radius);
}

.shm-card-title a:focus-visible {
   outline: none;
}

.shm-card-title a:focus-visible::after {
   outline: 2px solid var(--shm-orange);
   outline-offset: 2px;
}

.shm-card-excerpt {
   display: -webkit-box;
   margin: 0 0 20px;
   overflow: hidden;
   font-size: 15px;
   line-height: 1.6;
   color: #3f3f46;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
}

.shm-card-meta {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: auto;
   font-size: 13px;
   font-weight: 500;
   color: var(--shm-muted);
}

.shm-card-arrow {
   margin-left: auto;
   font-size: 16px;
   color: var(--shm-orange);
   transition: transform .2s;
}

.shm-card:hover .shm-card-arrow {
   transform: translateX(3px);
}

.shm-card.is-hero {
   grid-column: 1 / -1;
}

@media (min-width: 768px) {
   .shm-card.is-hero { padding: 40px; }
   .shm-card.is-hero .shm-card-title { max-width: 860px; font-size: 32px; line-height: 1.2; }
   .shm-card.is-hero .shm-card-excerpt { max-width: 760px; font-size: 17px; -webkit-line-clamp: 4; }
   .shm-card.is-hero .shm-card-meta { font-size: 14px; }
}

@media (max-width: 767px) {
   .shm-card.is-hero .shm-card-title { font-size: 24px; }
}

.shm-pagination {
   display: flex;
   justify-content: center;
   padding: 24px 0 88px;
}

/* Article
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-post-header {
   position: relative;
   padding: 48px 0 44px;
   background-color: #fff;
   background-image: var(--shm-mesh);
}

@media (min-width: 768px) {
   .shm-post-header { padding: 72px 0 60px; }
}

.shm-post-header-inner {
   max-width: 768px;
   margin: 0 auto;
   padding: 0 16px;
}

@media (min-width: 768px) {
   .shm-post-header-inner { padding: 0 24px; }
}

.shm-post-title {
   margin: 0 0 20px;
   font-size: 34px;
   line-height: 1.12;
   font-weight: 800;
   letter-spacing: -0.025em;
   color: var(--shm-heading);
}

@media (min-width: 768px) { .shm-post-title { font-size: 44px; } }
@media (min-width: 1024px) { .shm-post-title { font-size: 50px; } }

.shm-post-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 4px 10px;
   font-size: 15px;
   font-weight: 500;
   color: var(--shm-muted);
}

.shm-post-meta a {
   font-weight: 600;
   color: var(--shm-text);
}

.shm-post-meta a:hover {
   color: var(--shm-orange);
}

.shm-post-image {
   max-width: 1024px;
   margin: 40px auto 0;
   padding: 0 16px;
}

.shm-post-image img {
   display: block;
   width: 100%;
   border-radius: var(--shm-radius);
   box-shadow: var(--shm-shadow-card);
}

/* Article body: overrides Maido's .post-content typography
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm .post-content {
   max-width: 768px;
   margin: 0 auto;
   padding: 44px 16px 72px;
   font-size: 18px;
   line-height: 1.7;
   color: var(--shm-text);
}

@media (min-width: 768px) {
   .shm .post-content { padding: 56px 24px 96px; }
}

.shm .post-content p {
   margin-bottom: 24px;
   line-height: 1.7;
}

.shm .post-content > :first-child {
   margin-top: 0;
}

.shm .post-content h1,
.shm .post-content h2,
.shm .post-content h3,
.shm .post-content h4,
.shm .post-content h5,
.shm .post-content h6 {
   font-family: var(--shm-font);
   font-weight: 700;
   color: var(--shm-heading);
   scroll-margin-top: 88px;
}

.shm .post-content h2 {
   margin: 56px 0 16px;
   font-size: 28px;
   line-height: 1.25;
}

@media (min-width: 768px) {
   .shm .post-content h2 { font-size: 32px; }
}

.shm .post-content h3 {
   margin: 40px 0 12px;
   font-size: 21px;
   line-height: 1.35;
   letter-spacing: -0.01em;
}

.shm .post-content h4 {
   margin: 32px 0 10px;
   font-size: 18px;
   line-height: 1.4;
   letter-spacing: -0.01em;
}

.shm .post-content h2 + h3 {
   margin-top: 24px;
}

.shm .post-content strong {
   font-weight: 700;
   color: var(--shm-text);
}

.shm .post-content a {
   padding-bottom: 0;
   color: var(--shm-text);
   text-decoration: underline;
   text-decoration-color: var(--shm-orange);
   text-decoration-thickness: 2px;
   text-underline-offset: 3px;
   box-shadow: none;
   transition: color .15s;
}

.shm .post-content a:hover {
   color: var(--shm-orange);
   box-shadow: none;
}

.shm .post-content ul,
.shm .post-content ol {
   margin: 0 0 24px;
   padding-left: 24px;
}

.shm .post-content li {
   margin-bottom: 8px;
   padding-left: 4px;
}

.shm .post-content li::marker {
   color: var(--shm-orange);
}

.shm .post-content ol li::marker {
   font-weight: 700;
}

.shm .post-content ul ul,
.shm .post-content ol ol,
.shm .post-content ul ol,
.shm .post-content ol ul {
   margin: 8px 0 0;
   font-size: 100%;
}

.shm .post-content hr {
   width: 100%;
   height: 2px;
   margin: 48px 0;
   border-radius: 1px;
   background: var(--shm-rainbow-line);
   opacity: .6;
}

.shm .post-content hr::before,
.shm .post-content hr::after {
   display: none;
}

.shm .post-content blockquote {
   margin: 32px 0;
   padding: 4px 0 4px 20px;
   font-family: var(--shm-font);
   font-size: 19px;
   font-weight: 500;
   line-height: 1.6;
   border-left: 3px solid var(--shm-orange);
}

.shm .post-content blockquote::before {
   display: none;
}

/* Inline code and code blocks: the MCP page's light-gray boxes */
.shm .post-content code,
.shm .post-content p code {
   padding: 2px 6px;
   font-family: var(--shm-mono);
   font-size: .85em;
   color: #18181b;
   background-color: #f4f4f5;
   border: 1px solid #e4e4e7;
   border-radius: 6px;
}

.shm .post-content pre {
   margin: 28px 0;
   padding: 16px 20px;
   overflow-x: auto;
   background-color: #f9fafb;
   border: 1px solid var(--shm-line-strong);
   border-radius: 12px;
   transition: background-color .15s, border-color .15s;
}

.shm .post-content pre > code {
   display: block;
   width: max-content;              /* as wide as its longest line, so a long line scrolls (see ::before) */
   min-width: 100%;
   padding: 0;
   font-size: 14px;
   line-height: 1.65;
   white-space: pre;
   background: transparent;
   border: 0;
   border-radius: 0;
}

/* Keeps the first line clear of the Copy button (shm.js): a 1px-tall float only shortens the first line,
   and it counts toward <code>'s max-content width, so a first line that would run under the button
   scrolls instead. Lines below the button keep the full width. Pure CSS, so nothing moves when the
   button is added. */
.shm .post-content pre > code::before {
   content: '';
   float: right;
   width: 72px;
   height: 1px;
}

/* Copy button: shm.js wraps each <pre> in .shm-code and clones partials/code_copy.hbs into it.
   The wrapper takes over the <pre>'s margin, so wrapping doesn't move anything. */
.shm .post-content .shm-code {
   position: relative;
   margin: 28px 0;
}

.shm .post-content .shm-code > pre {
   margin: 0;
}

/* covers the gap between the button and the block's right edge, so a first line scrolling under the
   button doesn't peek out beside it; same color as the <pre>, hover included */
.shm .post-content .shm-code::after {
   content: '';
   position: absolute;
   top: 1px;
   right: 1px;
   width: 9px;
   height: 39px;
   background-color: #f9fafb;
   border-top-right-radius: 11px;
   transition: background-color .15s;
}

.shm-code-copy {
   position: absolute;
   z-index: 1;                     /* above .shm-code::after, so the focus ring isn't cut */
   top: 10px;
   right: 10px;
   display: flex;
   align-items: center;
   gap: 6px;
   height: 30px;
   padding: 0 10px;
   font-family: var(--shm-font);
   font-size: 13px;
   font-weight: 600;
   line-height: 1;
   color: #52525b;                 /* zinc-600 */
   cursor: pointer;
   background-color: #fff;
   border: 1px solid var(--shm-line-strong);
   border-radius: 8px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
   transition: color .15s, background-color .15s, border-color .15s;
}

.shm-code-copy svg {
   display: block;
   width: 14px;
   height: 14px;
   flex-shrink: 0;
}

.shm-code-copy .shm-icon-check,
.shm-code-copy.is-copied .shm-icon-copy {
   display: none;
}

.shm-code-copy.is-copied .shm-icon-check {
   display: block;
}

.shm-code-copy:focus-visible {
   outline: 2px solid var(--shm-orange);
   outline-offset: 2px;
}

/* hover only where there's a mouse: on touch screens :hover sticks after a tap */
@media (hover: hover) {
   .shm .post-content .shm-code:hover > pre {
      background-color: #f3f4f6;   /* gray-100 */
      border-color: #d1d5db;       /* gray-300 */
   }

   .shm .post-content .shm-code:hover::after {
      background-color: #f3f4f6;
   }

   .shm-code:hover .shm-code-copy {
      color: var(--shm-heading);
      border-color: #d1d5db;
   }

   .shm-code .shm-code-copy:hover {
      border-color: var(--shm-faint);
   }
}

.shm-code .shm-code-copy.is-copied {
   color: #15803d;                 /* green-700 */
   background-color: #f0fdf4;      /* green-50 */
   border-color: #86efac;          /* green-300 */
}

/* phones: an icon-only button, so less of the narrow block goes to the button's lane */
@media (max-width: 639px) {
   .shm .post-content pre > code::before {
      width: 32px;
   }

   .shm-code-copy {
      justify-content: center;
      width: 30px;
      padding: 0;
   }

   .shm-code-copy-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
   }
}

/* Tables: a clay card with a gray header row; shm.js adds the scrolling wrapper */
.shm .post-content table {
   width: 100%;
   margin: 32px 0;
   font-size: 15px;
   line-height: 1.55;
   border-collapse: collapse;
}

.shm .post-content .shm-table {
   margin: 32px 0;
   overflow-x: auto;
   background-color: #fff;
   border: 1px solid var(--shm-card-border);
   border-radius: var(--shm-radius);
   box-shadow: var(--shm-shadow-card);
   -webkit-overflow-scrolling: touch;
}

.shm .post-content .shm-table table {
   margin: 0;
}

.shm .post-content th,
.shm .post-content td {
   padding: 12px 16px;
   text-align: left;
   vertical-align: top;
}

.shm .post-content th {
   font-size: 14px;
   font-weight: 600;
   color: var(--shm-heading);
   background-color: hsl(240, 5%, 97%);
   border-top: 0;
   border-bottom: 1px solid var(--shm-line-strong);
}

.shm .post-content td {
   min-width: 140px;
   border-bottom: 1px solid var(--shm-line);
}

.shm .post-content th:first-child,
.shm .post-content td:first-child {
   padding-left: 20px;
}

.shm .post-content th:last-child,
.shm .post-content td:last-child {
   padding-right: 20px;
}

.shm .post-content tbody tr:last-child td {
   border-bottom: 0;
}

.shm .post-content tbody tr:hover {
   background-color: hsl(27, 96%, 98%);
}

@media (max-width: 767px) {
   .shm .post-content { font-size: 17px; }
   .shm .post-content table { font-size: 14px; }
}

/* "Summarize this article with AI" card (ai_summary partial), first thing in every post body
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm .post-content .shm-ai-summary {
   margin: 0 0 40px;
   padding: 20px 24px 24px;
   background-color: #fff;
   background-image: var(--shm-mesh);
   border: 1px solid var(--shm-card-border);
   border-radius: var(--shm-radius);
   box-shadow: var(--shm-shadow-card);
}

.shm .post-content .shm-ai-summary-label {
   margin: 0 0 14px;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.4;
   color: var(--shm-heading);
}

.shm-ai-summary-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
}

/* the border is a background layer, as in .shm-btn-outline, so hover can swap gray for the rainbow without shifting */
.shm .post-content a.shm-ai-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   height: 44px;
   padding: 0 12px;
   font-size: 15px;
   font-weight: 600;
   line-height: 1;
   white-space: nowrap;
   color: var(--shm-text);
   text-decoration: none;
   border: 1.5px solid transparent;
   border-radius: var(--shm-radius-button);
   background-image: linear-gradient(#fff, #fff), linear-gradient(var(--shm-line-strong), var(--shm-line-strong));
   background-origin: border-box;
   background-clip: padding-box, border-box;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
   transition: box-shadow .2s, transform .2s;
}

.shm .post-content a.shm-ai-btn:hover,
.shm .post-content a.shm-ai-btn:focus-visible {
   color: var(--shm-text);
   background-image: linear-gradient(#fff, #fff), var(--shm-rainbow-button);
   box-shadow: var(--shm-shadow-card-hover);
   transform: translateY(-1px);
}

.shm .post-content a.shm-ai-btn:focus-visible {
   outline: 2px solid var(--shm-orange);
   outline-offset: 2px;
}

.shm-ai-btn svg {
   display: block;
   width: 18px;
   height: 18px;
   flex-shrink: 0;
   fill: var(--shm-heading);
}

@media (max-width: 639px) {
   .shm .post-content .shm-ai-summary { padding: 16px 16px 18px; }
   .shm-ai-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
   .shm-ai-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

/* In-article sign-up banner (post_banner partial)
   Cloned into position before the 3rd/6th/9th H2 by assets/js/shm.js.
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-banner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin: 8px 0 48px;
   padding: 24px 28px;
   background-color: #fff;
   background-image: var(--shm-mesh);
   border: 1px solid var(--shm-card-border);
   border-radius: var(--shm-radius);
   box-shadow: var(--shm-shadow-card);
}

.shm-banner-text {
   flex: 1 1 320px;
}

.shm-banner-eyebrow {
   margin: 0 0 4px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--shm-orange);
}

.shm-banner-headline {
   margin: 0;
   font-size: 19px;
   font-weight: 700;
   line-height: 1.35;
   color: var(--shm-heading);
}

.shm-banner .shm-btn-google {
   flex-shrink: 0;
}

@media (max-width: 767px) {
   .shm-banner { padding: 20px; }
   .shm-banner .shm-btn-google { width: 100%; }
}

/* Author bio (author-bio/template.html)
   A Lexical HTML card that scripts/author-bio.mjs appends to the end of every post, so it renders
   inside .post-content; every selector carries .shm .post-content to beat the article's p/a/img rules.
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm .post-content .shm-author-bio {
   position: relative;
   display: grid;
   grid-template-columns: 64px minmax(0, 1fr);
   grid-template-areas: "photo head" "text text";
   gap: 16px;
   align-items: center;
   margin: 56px 0 0;
   padding: 20px;
   background-color: #fff;
   background-image: var(--shm-mesh);
   border: 1px solid var(--shm-card-border);
   border-radius: var(--shm-radius);
   box-shadow: var(--shm-shadow-card);
}

.shm .post-content .shm-author-bio p {
   margin: 0;
}

.shm .post-content .shm-author-bio-photo {
   grid-area: photo;
   display: block;
   width: 64px;
   height: 64px;
   margin: 0;
   object-fit: cover;
   border-radius: 50%;
}

.shm .post-content .shm-author-bio-head {
   grid-area: head;
   padding-right: 44px;
}

.shm .post-content .shm-author-bio-eyebrow {
   margin-bottom: 4px;
   font-size: 12px;
   font-weight: 700;
   line-height: 1.4;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--shm-orange);
}

.shm .post-content .shm-author-bio-name {
   font-size: 19px;
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -0.02em;
   color: var(--shm-heading);
}

/* a short rainbow bar instead of the article's orange underline, like the active nav link */
.shm .post-content .shm-author-bio-name a {
   position: relative;
   display: inline-block;
   padding-bottom: 6px;
   color: inherit;
   text-decoration: none;
}

.shm .post-content .shm-author-bio-name a::after {
   content: '';
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   height: 2px;
   border-radius: 1px;
   background: var(--shm-rainbow-line);
}

.shm .post-content .shm-author-bio-name a:hover {
   color: var(--shm-orange);
}

.shm .post-content .shm-author-bio-role {
   margin-top: 6px;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.4;
   color: var(--shm-muted);
}

.shm .post-content .shm-author-bio-role a {
   font-weight: 600;
   white-space: nowrap;
}

.shm .post-content .shm-author-bio-linkedin {
   position: absolute;
   top: 16px;
   right: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   color: var(--shm-heading);
   text-decoration: none;
   background-color: #f4f4f5;
   border-radius: 12px;
   transition: color .15s, background-color .15s;
}

.shm .post-content .shm-author-bio-linkedin:hover {
   color: var(--shm-orange);
   background-color: #e4e4e7;
}

.shm .post-content .shm-author-bio-linkedin svg {
   display: block;
   width: 18px;
   height: 18px;
}

.shm .post-content .shm-author-bio-text {
   grid-area: text;
   font-size: 16px;
   line-height: 1.65;
   color: var(--shm-text);
}

@media (min-width: 640px) {
   .shm .post-content .shm-author-bio {
      grid-template-columns: 150px minmax(0, 1fr);
      grid-template-areas: "photo head" "photo text";
      gap: 14px 28px;
      align-items: start;
      padding: 28px;
   }

   .shm .post-content .shm-author-bio-photo {
      width: 150px;
      height: 150px;
      border-radius: var(--shm-radius);
   }

   .shm .post-content .shm-author-bio-head { padding-right: 56px; }
   .shm .post-content .shm-author-bio-name { font-size: 22px; }
   .shm .post-content .shm-author-bio-linkedin { top: 28px; right: 28px; width: 44px; height: 44px; }
   .shm .post-content .shm-author-bio-linkedin svg { width: 22px; height: 22px; }
}

@media (min-width: 768px) {
   .shm .post-content .shm-author-bio-text { font-size: 17px; }
}

/* Sign-up CTA (FinalCTA)
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-cta {
   position: relative;
   overflow: hidden;
   padding: 80px 16px;
   text-align: center;
   background-color: #fff;
   border-top: 1px solid var(--shm-line);
}

@media (min-width: 768px) {
   .shm-cta { padding: 144px 24px; }
}

.shm-cta-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: .4;
   pointer-events: none;
}

.shm-cta-inner {
   position: relative;
   max-width: 768px;
   margin: 0 auto;
}

.shm-cta-title {
   margin: 0 0 24px;
   font-size: 30px;
   line-height: 1.2;
   font-weight: 700;
   color: var(--shm-heading);
}

@media (min-width: 768px) { .shm-cta-title { font-size: 36px; } }
@media (min-width: 1024px) { .shm-cta-title { font-size: 48px; } }

.shm-cta-text {
   max-width: 576px;
   margin: 0 auto 40px;
   font-size: 18px;
   line-height: 1.6;
   color: var(--shm-text);
}

.shm-btn-google {
   gap: 14px;
   padding: 0 28px 0 9px;
}

.shm-google-chip {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   background-color: #fff;
   border-radius: 7px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.shm-google-g {
   display: block;
   width: 20px;
   height: 20px;
}

.shm-cta-note {
   margin: 16px 0 0;
   font-size: 14px;
   font-weight: 600;
   color: var(--shm-text);
}

/* Related posts
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-related {
   padding: 64px 0 88px;
   background-color: #fcfcfd;
   border-top: 1px solid var(--shm-line);
}

.shm-related-title {
   margin: 0 0 32px;
   font-size: 26px;
   line-height: 1.2;
   font-weight: 700;
   text-align: center;
   color: var(--shm-heading);
}

@media (min-width: 768px) {
   .shm-related-title { font-size: 30px; }
}

/* Citations (scripts/sources.mjs, see sources/CLAUDE.md): numbered markers after supported sentences,
   rendered by Ghost as <a href="#source-N"><sup>N</sup></a>, and the collapsible Sources card that sits
   before the author bio.
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm .post-content a[href^="#source-"] {
   margin-left: 1px;
   font-weight: 700;
   color: var(--shm-orange);
   text-decoration: none;
}

.shm .post-content a[href^="#source-"] sup {
   font-size: 11px;
   line-height: 0;
}

.shm .post-content a[href^="#source-"]:hover {
   color: var(--shm-heading);
}

.shm .post-content .shm-sources {
   margin: 48px 0 0;
   border-top: 1px solid var(--shm-line-strong);
}

.shm .post-content .shm-sources summary {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 16px 0;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--shm-heading);
   list-style: none;
   cursor: pointer;
}

.shm .post-content .shm-sources summary::-webkit-details-marker {
   display: none;
}

.shm .post-content .shm-sources summary::before {
   content: "";
   width: 7px;
   height: 7px;
   border-right: 2px solid var(--shm-orange);
   border-bottom: 2px solid var(--shm-orange);
   transform: rotate(-45deg);
   transition: transform .15s;
}

.shm .post-content .shm-sources details[open] summary::before {
   transform: rotate(45deg);
}

.shm .post-content .shm-sources-note {
   margin: 0 0 14px;
   font-size: 14px;
   line-height: 1.6;
   color: var(--shm-muted);
}

.shm .post-content .shm-sources ol {
   margin: 0 0 8px;
   padding-left: 22px;
   font-size: 14px;
   line-height: 1.6;
}

.shm .post-content .shm-sources li {
   margin: 0 0 6px -6px;
   padding: 2px 6px;
   border-radius: 6px;
   overflow-wrap: anywhere;
   transition: background-color .3s;
}

.shm .post-content .shm-sources li.is-target {
   background-color: var(--shm-accent-bg);
}

.shm .post-content .shm-sources a {
   text-decoration-thickness: 1px;
}

/* Table of contents ("On this page": toc partial, shm.js)
   One <nav>, two looks. Below 1280px: a fixed bar under the sticky header (64px) that slides in once the
   article starts; its button shows the current section and opens the list as a dropdown. At >=1280px:
   a sticky sidebar in the left column of .shm-post-body. Neither moves the article, so no layout shift.
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-toc {
   position: fixed;
   top: 64px;
   right: 0;
   left: 0;
   z-index: 40;                    /* under the header (50) and its menu */
   background-color: rgba(255, 255, 255, .92);
   border-bottom: 1px solid var(--shm-line);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
   -webkit-backdrop-filter: blur(24px);
   backdrop-filter: blur(24px);
   visibility: hidden;
   opacity: 0;
   transform: translateY(-100%);
   transition: transform .2s, opacity .2s, visibility .2s;
}

.shm-toc.is-visible {
   visibility: visible;
   opacity: 1;
   transform: none;
}

.shm-toc-toggle {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   max-width: 768px;
   height: 44px;
   margin: 0 auto;
   padding: 0 16px;
   font-family: var(--shm-font);
   font-size: 14px;
   font-weight: 600;
   line-height: 1;
   color: var(--shm-heading);
   text-align: left;
   cursor: pointer;
   background: none;
   border: 0;
}

@media (min-width: 768px) {
   .shm-toc-toggle { padding: 0 24px; }
}

.shm-toc-toggle:focus-visible {
   outline: 2px solid var(--shm-orange);
   outline-offset: -2px;
}

.shm-toc-count {
   flex-shrink: 0;
   padding: 4px 8px;
   font-size: 12px;
   font-weight: 700;
   color: var(--shm-accent-fg);
   background-color: var(--shm-accent-bg);
   border-radius: 999px;
}

.shm-toc-count:empty {
   display: none;
}

.shm-toc-current {
   flex: 1 1 auto;
   min-width: 0;
   line-height: 1.4;               /* room for descenders: overflow: hidden would clip them at 1 */
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.shm-toc-toggle svg {
   display: block;
   flex-shrink: 0;
   width: 18px;
   height: 18px;
   color: var(--shm-muted);
   transition: transform .2s;
}

.shm-toc.is-open .shm-toc-toggle svg {
   transform: rotate(180deg);
}

.shm-toc-title {
   display: none;
}

.shm-toc-list {
   display: none;
   position: absolute;
   top: 100%;
   right: 0;
   left: 0;
   max-height: calc(100vh - 140px);
   max-height: calc(100dvh - 140px);
   margin: 0;
   padding: 12px max(16px, calc((100% - 768px) / 2 + 24px)) 16px;
   overflow-y: auto;
   overscroll-behavior: contain;
   list-style: none;
   background-color: #fff;
   border-bottom: 1px solid var(--shm-line-strong);
   box-shadow: 0 16px 32px rgba(0, 0, 0, .08);
}

.shm-toc.is-open .shm-toc-list {
   display: block;
}

.shm-toc-list ol {
   display: none;
   margin: 0;
   padding: 0;
   list-style: none;
}

.shm-toc-list .is-active > ol {
   display: block;
}

.shm-toc-list li {
   margin: 0;
   padding: 0;
}

/* the rail: each link's left border sits on the list's 2px line */
.shm-toc-list > li {
   border-left: 2px solid var(--shm-line);
}

.shm-toc-list a {
   display: block;
   margin-left: -2px;
   padding: 7px 0 7px 14px;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.45;
   color: var(--shm-muted);
   text-decoration: none;
   border-left: 2px solid transparent;
   transition: color .15s, border-color .15s;
}

.shm-toc-list ol a {
   padding: 5px 0 5px 28px;
   font-size: 13px;
}

.shm-toc-list .is-active > a {
   font-weight: 600;
   color: var(--shm-heading);
}

.shm-toc-list a[aria-current] {
   color: var(--shm-heading);
   border-left-color: var(--shm-orange);
}

.shm-toc-list a:focus-visible {
   outline: 2px solid var(--shm-orange);
   outline-offset: -2px;
   border-radius: 4px;
}

@media (hover: hover) {
   .shm-toc-list a:hover { color: var(--shm-heading); }
}

.shm-toc-progress {
   position: absolute;
   right: 0;
   bottom: -1px;
   left: 0;
   height: 2px;
}

.shm-toc-progress-bar {
   display: block;
   height: 100%;
   background: var(--shm-rainbow-line);
   clip-path: inset(0 100% 0 0);
}

/* the bar covers 44px under the header, so a jumped-to heading lands below both */
@media (max-width: 1279px) {
   .shm .post-content h2,
   .shm .post-content h3 {
      scroll-margin-top: 128px;
   }
}

@media (min-width: 1280px) {
   .shm-post-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 768px) minmax(0, 1fr);
      column-gap: 32px;
      padding: 0 24px;             /* keeps the sidebar off the window edge at 1280px */
   }

   .shm-post-body > .shm-content {
      grid-row: 1;
      grid-column: 2;
      width: 100%;
   }

   .shm-toc {
      position: sticky;
      top: 96px;                   /* header + 32px */
      right: auto;
      left: auto;
      z-index: auto;
      display: flex;
      flex-direction: column;
      grid-row: 1;
      grid-column: 1;
      align-self: start;
      justify-self: end;
      width: 100%;
      max-width: 264px;
      max-height: calc(100vh - 128px);
      margin-top: 56px;            /* level with the article's first card (.post-content top padding) */
      background: none;
      border: 0;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      visibility: visible;
      opacity: 1;
      transform: none;
      transition: none;
   }

   .shm-toc-toggle {
      display: none;
   }

   .shm-toc-title {
      display: block;
      margin: 0 0 12px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--shm-muted);
   }

   .shm-toc-list {
      display: block;
      position: static;
      flex: 0 1 auto;
      min-height: 0;
      max-height: none;
      padding: 0;
      background: none;
      border: 0;
      box-shadow: none;
   }

   .shm-toc-progress {
      position: static;
      flex-shrink: 0;
      margin-top: 16px;
      overflow: hidden;
      background-color: var(--shm-line);
      border-radius: 2px;
   }
}

/* Copy link to a section (heading_link partial, shm.js)
   Inline after the heading text on narrow screens; in the left margin from 900px, where it can't
   rewrap the heading. Shown on hover/focus with a mouse, always (faint) on touch screens.
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm .post-content h2[tabindex="-1"]:focus:not(:focus-visible),
.shm .post-content h3[tabindex="-1"]:focus:not(:focus-visible) {
   outline: none;
}

.shm-heading-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   margin-left: 6px;
   padding: 0;
   vertical-align: middle;
   color: var(--shm-faint);
   cursor: pointer;
   background: none;
   border: 0;
   border-radius: 6px;
   opacity: .6;
   transition: opacity .15s, color .15s, background-color .15s;
}

.shm-heading-link svg {
   display: block;
   width: 16px;
   height: 16px;
}

.shm-heading-link .shm-icon-check,
.shm-heading-link.is-copied .shm-icon-link {
   display: none;
}

.shm-heading-link.is-copied .shm-icon-check {
   display: block;
}

.shm-heading-link.is-copied {
   color: var(--shm-orange);
   opacity: 1;
}

.shm-heading-link:focus-visible {
   opacity: 1;
   outline: 2px solid var(--shm-orange);
   outline-offset: 2px;
}

.shm-heading-link-tip {
   position: absolute;
   right: 0;
   bottom: calc(100% + 6px);
   padding: 5px 8px;
   font-family: var(--shm-font);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: 0;
   white-space: nowrap;
   color: #fff;
   pointer-events: none;
   background-color: var(--shm-heading);
   border-radius: 6px;
   opacity: 0;
   transition: opacity .15s;
}

.shm-heading-link.is-tip .shm-heading-link-tip {
   opacity: 1;
}

@media (hover: hover) {
   .shm-heading-link { opacity: 0; }

   .shm .post-content h2:hover > .shm-heading-link,
   .shm .post-content h3:hover > .shm-heading-link,
   .shm-heading-link.is-tip {
      opacity: 1;
   }

   .shm-heading-link:hover {
      color: var(--shm-orange);
      background-color: var(--shm-accent-bg);
   }
}

@media (min-width: 900px) {
   .shm .post-content h2[id],
   .shm .post-content h3[id] {
      position: relative;
   }

   .shm-heading-link {
      position: absolute;
      top: 0;
      right: calc(100% + 4px);
      margin: 0;
   }

   .shm .post-content h2 > .shm-heading-link { top: 6px; }   /* centred on the first line (32px x 1.25) */

   .shm-heading-link-tip {
      right: auto;
      left: 0;
   }
}

/* "Try SEO Heatmap" card (sidebar_cta partial, shm.js)
   At >=1280px the <aside> is a sticky, screen-high box under the header in the right column of
   .shm-post-body, and the card is centered in it: it scrolls in with the article, stops in the middle of
   the screen, and scrolls away with the end of the article. Hidden below 1280px, where that column doesn't exist.
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-sidebar-cta {
   display: none;
}

@media (min-width: 1280px) {
   .shm-sidebar-cta {
      position: sticky;
      top: 64px;                   /* the header */
      display: flex;
      align-items: center;
      grid-row: 1;
      grid-column: 3;
      align-self: start;
      justify-self: start;
      width: 100%;
      max-width: 300px;
      height: calc(100vh - 64px);
   }
}

/* light blue (owner's pick) so it stands out from the white page; the Learn more button shares it */
.shm-sidebar-cta-card {
   --shm-sidebar-cta-bg: #add8ea;
   position: relative;
   width: 100%;
   padding: 24px 20px 20px;
   overflow: hidden;               /* clips the rainbow line to the rounded corners */
   background-color: var(--shm-sidebar-cta-bg);
   border: 1px solid rgba(0, 0, 0, .06);
   border-radius: var(--shm-radius);
   box-shadow: var(--shm-shadow-card);
}

.shm-sidebar-cta-card::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   height: 4px;
   background: var(--shm-rainbow-line);
}

.shm-sidebar-cta-close {
   position: absolute;
   top: 12px;
   right: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   padding: 0;
   color: #3f3f46;                 /* zinc-700: the muted gray is too faint on the blue */
   cursor: pointer;
   background: none;
   border: 0;
   border-radius: 6px;
   transition: color .15s, background-color .15s;
}

.shm-sidebar-cta-close svg {
   display: block;
   width: 18px;
   height: 18px;
}

.shm-sidebar-cta-close:hover {
   color: var(--shm-heading);
   background-color: rgba(0, 0, 0, .08);
}

.shm-sidebar-cta-close:focus-visible {
   outline: 2px solid var(--shm-orange);
   outline-offset: -2px;           /* inside, or the card's overflow would clip it */
}

.shm-sidebar-cta-title {
   margin: 0 0 8px;
   padding-right: 28px;            /* clear of the close button */
   font-size: 22px;
   font-weight: 800;
   line-height: 1.25;
   color: var(--shm-heading);
}

.shm-sidebar-cta-text {
   margin: 0 0 20px;
   font-size: 15px;
   line-height: 1.55;
   color: var(--shm-text);
}

/* side by side when the column is wide enough (~1440px+), stacked below that */
.shm-sidebar-cta-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.shm-sidebar-cta-actions a {
   flex: 1 1 auto;
   height: 40px;
   padding: 0 16px;
   font-size: 15px;
   text-decoration: none;
}

/* Learn more: filled with the card's blue inside the rainbow outline; rainbow on hover/focus, as everywhere else */
.shm-sidebar-cta-actions .shm-btn-outline {
   background-image: linear-gradient(var(--shm-sidebar-cta-bg), var(--shm-sidebar-cta-bg)), var(--shm-rainbow-button);
}

.shm-sidebar-cta-actions .shm-btn-outline:hover,
.shm-sidebar-cta-actions .shm-btn-outline:focus-visible {
   background-image: var(--shm-rainbow-button);
}

/* Exit-intent sign-up popup (exit_popup partial, shm.js)
   A modal <dialog> with the app's sign-up form. shm.js opens it only on desktop (a mouse), so the small-screen
   rules just keep it inside short windows: it never grows past the window and scrolls inside if it must.
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.shm-exit-popup {
   box-sizing: border-box;
   width: calc(100% - 32px);
   max-width: 420px;
   max-height: calc(100% - 32px);
   padding: 0;
   overflow: auto;                 /* also clips the rainbow line to the rounded corners */
   color: var(--shm-text);
   background-color: #fff;
   border: 0;
   border-radius: var(--shm-radius);
   box-shadow: 0 24px 64px rgba(0, 0, 0, .2);
}

.shm-exit-popup:focus {
   outline: none;                  /* it takes focus on open; Tab moves on to the close button */
}

.shm-exit-popup[open] {
   animation: shm-exit-popup-in .2s ease-out;
}

.shm-exit-popup::backdrop {
   background-color: rgba(15, 15, 15, .55);
}

@keyframes shm-exit-popup-in {
   from { opacity: 0; transform: translateY(12px) scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
   .shm-exit-popup[open] { animation: none; }
}

.shm-exit-popup-card {
   position: relative;
   padding: 32px 28px 24px;
}

.shm-exit-popup-card::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   height: 4px;
   background: var(--shm-rainbow-line);
}

.shm-exit-popup-close {
   position: absolute;
   top: 14px;
   right: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   padding: 0;
   color: var(--shm-muted);
   cursor: pointer;
   background: none;
   border: 0;
   border-radius: 6px;
   transition: color .15s, background-color .15s;
}

.shm-exit-popup-close svg {
   display: block;
   width: 20px;
   height: 20px;
}

.shm-exit-popup-close:hover {
   color: var(--shm-heading);
   background-color: var(--shm-line);
}

.shm-exit-popup-close:focus-visible {
   outline: 2px solid var(--shm-orange);
   outline-offset: -2px;
}

.shm-exit-popup-title {
   margin: 0 0 8px;
   padding-right: 32px;            /* clear of the close button */
   font-size: 24px;
   font-weight: 800;
   line-height: 1.25;
   letter-spacing: -0.02em;
   color: var(--shm-heading);
   text-wrap: balance;
}

.shm-exit-popup-nowrap {
   white-space: nowrap;
}

.shm-exit-popup-text {
   margin: 0 0 20px;
   font-size: 15px;
   line-height: 1.55;
   color: var(--shm-text);
}

.shm-exit-popup .shm-btn-google,
.shm-exit-popup-submit {
   width: 100%;
}

/* the app's "Or continue with email" divider */
.shm-exit-popup-or {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 20px 0 16px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--shm-muted);
}

.shm-exit-popup-or::before,
.shm-exit-popup-or::after {
   content: "";
   flex: 1;
   height: 1px;
   background-color: var(--shm-line-strong);
}

.shm-exit-popup-form label {
   display: block;
   margin: 0 0 6px;
   font-size: 14px;
   font-weight: 600;
   color: var(--shm-heading);
}

.shm-exit-popup-form input {
   box-sizing: border-box;
   display: block;
   width: 100%;
   height: 44px;
   margin: 0 0 14px;
   padding: 0 12px;
   font-family: var(--shm-font);
   font-size: 16px;                /* 16px+ so iOS doesn't zoom in on focus */
   color: var(--shm-text);
   background-color: #fff;
   border: 1px solid var(--shm-line-strong);
   border-radius: var(--shm-radius-button);
   transition: border-color .15s;
}

.shm-exit-popup-form input:hover {
   border-color: var(--shm-faint);
}

.shm-exit-popup-form input:focus {
   border-color: var(--shm-orange);
   outline: 1px solid var(--shm-orange);
}

.shm-exit-popup-error {
   margin: 0 0 14px;
   padding: 10px 12px;
   font-size: 14px;
   line-height: 1.45;
   color: hsl(0, 72%, 38%);
   background-color: hsl(0, 86%, 97%);
   border-radius: 8px;
}

.shm-exit-popup-submit {
   margin-top: 4px;
}

.shm-exit-popup-submit svg {
   display: block;
   width: 18px;
   height: 18px;
}

.shm-exit-popup-submit:disabled,
.shm-exit-popup .shm-btn-google:disabled {
   cursor: wait;
   opacity: .6;
}

.shm-exit-popup-signin {
   margin: 18px 0 0;
   font-size: 14px;
   text-align: center;
   color: var(--shm-muted);
}

.shm-exit-popup-signin a {
   font-weight: 600;
   color: var(--shm-text);
   text-decoration: underline;
   text-decoration-color: var(--shm-orange);
   text-underline-offset: 2px;
}