/* ===========================================================================
   SEO & GOOGLE BUSINESS PROFILE — page styles              added 2026-09-24
   Copy source: "Media tamer web copy .docx", SEO & GBP.
   Only what is unique to this page. The hero and its photo frame, the tile
   grid, the entrance animation, the draft notes and the closing CTA all come
   from assets/mt-shared.css, which loads first.
   =========================================================================== */

/* --- 01 hero --------------------------------------------------------------
   One button here, not two, so the row is spaced with padding rather than the
   margin utility the build ships. Tailwind's pt-8 does not survive this
   build's purge - only pt-7 does, at 28px - so the 32px is set here to match
   the spacing every other hero uses. */
.mt-seo-hero-cta {
  padding-top: 32px
}

/* --- 03 foundation-first / sequencing ------------------------------------
   Copy on the left, the two steps on the right on a rail. The rail is drawn
   on the list and the step cards are opaque, so it only shows in the gap
   between them - the connector reads without needing a node per card. */
.mt-seo-seq {
  display: grid;
  gap: 40px
}

@media (min-width:1024px) {
  .mt-seo-seq {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 64px;
    align-items: center
  }
}

.mt-seo-callout__body {
  margin: 18px 0 0;
  max-width: 46rem;
  font-size: 16px;
  line-height: 1.75;
  color: var(--mt-text-muted)
}

.mt-seo-seq__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px
}

/* the rail sits level with the middle of the numbered discs: 26px of card
   padding plus half of the 38px disc */
.mt-seo-seq__steps::before {
  content: "";
  position: absolute;
  left: 45px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--mt-border), var(--mt-orange))
}

.mt-seo-seq__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 18px;
  border: 1px solid var(--mt-border);
  background: #fff;
  box-shadow: 0 18px 44px -32px rgba(26, 31, 46, .5)
}

.mt-seo-seq__step.is-current {
  border-color: rgba(255, 107, 53, .45);
  box-shadow: 0 22px 50px -30px rgba(255, 107, 53, .45)
}

.mt-seo-seq__n {
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--mt-border);
  background: #fff;
  font-family: var(--font-heading), "Arial Narrow", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--mt-orange)
}

.mt-seo-seq__step.is-current .mt-seo-seq__n {
  background: var(--mt-orange);
  border-color: var(--mt-orange);
  color: var(--mt-navy)
}

.mt-seo-seq__body {
  min-width: 0
}

.mt-seo-seq__label {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt-text-muted)
}

.mt-seo-seq__name {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--mt-navy)
}

.mt-seo-seq__here {
  display: inline-block;
  margin: 10px 0 0;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255, 107, 53, .12);
  color: var(--mt-orange-dark)
}

/* --- 04 case study -------------------------------------------------------
   The layout the wireframe asks for, carrying dummy figures until the real
   ones arrive. It says so on its face: the flag below is the same dashed
   treatment the before/after sliders use, so nothing here can be mistaken
   for a real client's numbers. */
.mt-seo-case {
  margin-top: 48px;
  padding: 34px 30px;
  border-radius: 24px;
  border: 1px solid var(--mt-border);
  background: #fff;
  box-shadow: 0 30px 70px -44px rgba(26, 31, 46, .45)
}

@media (min-width:768px) {
  .mt-seo-case {
    padding: 44px 44px
  }
}

.mt-seo-case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px
}

.mt-seo-case__who {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--mt-navy)
}

.mt-seo-case__span {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--mt-text-muted)
}

.mt-seo-case__flag {
  flex: 0 0 auto;
  border: 1px dashed rgba(255, 107, 53, .55);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mt-orange-dark)
}

.mt-seo-case__stats {
  list-style: none;
  margin: 30px 0 0;
  padding: 26px 0 0;
  display: grid;
  gap: 24px;
  border-top: 1px solid var(--mt-border)
}

@media (min-width:720px) {
  .mt-seo-case__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px
  }
}

.mt-seo-case__stats li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mt-text-muted)
}

.mt-seo-case__fig {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading), "Arial Narrow", sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--mt-orange)
}

.mt-seo-case__quote {
  margin: 30px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--mt-border)
}

.mt-seo-case__quote p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--mt-navy)
}

/* <cite>, not <footer>: the build applies content-visibility:auto with
   contain-intrinsic-size:auto 900px to every <footer>, so a nested one
   reserved a 900px placeholder inside the card while it was off-screen.
   mt-chrome.js also collects "main > *, footer" for the header theme
   switch, which a quote attribution has no business joining. */
.mt-seo-case__by {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 13px;
  color: var(--mt-text-muted)
}

/* the bracketed placeholder label, as used in the FAQ answers */
.mt-seo-case__quote strong {
  font-weight: 800;
  color: var(--mt-navy)
}