/* ===========================================================================
   WEBSITE + CRM & AUTOMATIONS — page styles                 added 2026-09-23
   Copy source: "Media tamer web copy.docx", WEBSITE + CRM & AUTOMATIONS.
   Only what is unique to this page. The hero, the tile grid, the entrance
   animation, the preloader, the draft notes and the closing CTA all come from
   assets/mt-shared.css, which loads first.
   =========================================================================== */

/* --- 02 what's included ---------------------------------------------------
   The list itself now uses the home page's own #package utilities
   (space-y-3.5 / sm:columns-2 / sm:gap-x-8), so it needs no rules here. What
   is left is the photo beside it — the image home uses for its
   "CRM & Automations" service card, under the same orange tint and diagonal
   sheen that treatment carries, lightened so the photograph still reads. */
.mt-wc-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--mt-border);
  box-shadow: 0 30px 80px -34px rgba(26, 31, 46, .45)
}

.mt-wc-shot img {
  display: block;
  width: 100%;
  height: clamp(300px, 40vw, 470px);
  object-fit: cover
}

.mt-wc-shot__tint,
.mt-wc-shot__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none
}

.mt-wc-shot__tint {
  background: linear-gradient(160deg, rgba(255, 107, 53, .24) 0%,
      rgba(26, 31, 46, .10) 46%, rgba(26, 31, 46, .44) 100%)
}

.mt-wc-shot__sheen {
  background: linear-gradient(115deg, transparent 34%,
      rgba(255, 255, 255, .14) 48%, rgba(255, 255, 255, 0) 62%)
}

/* The photo sits left of the copy from lg up. It is done with order rather
   than by moving it in the markup, so the source order stays heading → list
   → photo: that is the order a screen reader reads, and below lg, where the
   grid is a single column, it is the order the section stacks in. */
@media (min-width:1024px) {
  .mt-wc-shot {
    order: -1
  }
}

/* --- 03 CRM advantage -----------------------------------------------------
   Three features, so the shared four-column tile grid narrows to three. */
@media (min-width:1024px) {
  .mt-tile-grid.mt-wc-three {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

/* --- 04 pricing card ------------------------------------------------------
   Two columns inside one card: price and call to action on the left, what the
   price covers on the right, split by a hairline. The card was a 520px column
   on a full-width dark band before, which read as empty. It widens to 900px
   and the panel does the filling, so the section keeps its glow and embers. */
.mt-wc-price {
  margin-top: 52px;
  width: 100%;
  max-width: 900px
}

.mt-wc-price__grid {
  display: grid;
  gap: 30px
}

@media (min-width:860px) {
  .mt-wc-price__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px
  }

  /* the divider is a border on the second column rather than a separate node,
     so it disappears with the two-column layout and needs no media reset */
  .mt-wc-price__covers {
    border-left: 1px solid rgba(255, 255, 255, .10);
    padding-left: 44px
  }
}

@media (max-width:859px) {
  .mt-wc-price__covers {
    border-top: 1px solid rgba(255, 255, 255, .10);
    padding-top: 28px
  }
}

/* Rev 5 §08: "Replace the whole block with the §04 offer statement and fine
   print." The fine print was here, the offer statement was not - and §04 is
   explicit that the two travel together. Body text, never a button label, the
   same rule the home hero follows. */
.mt-wc-offer {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  color: #fff
}

.mt-wc-term {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mt-text-on-dark)
}

.mt-wc-term strong {
  color: #fff;
  font-weight: 800
}

.mt-wc-savings {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  display: grid;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, .10)
}

.mt-wc-savings li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mt-text-on-dark)
}

.mt-wc-savings span {
  font-family: var(--font-heading), "Arial Narrow", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--mt-orange);
  flex: 0 0 auto
}

.mt-wc-price__seal {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mt-text-on-dark)
}

.mt-wc-price__covers-h {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt-orange)
}

/* The inclusions beside the price are not final. The long note that used to
   explain why is gone; this says the same thing in one line, in the same
   bracketed form the FAQ placeholders use. */
.mt-wc-price__ph {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mt-text-on-dark)
}

.mt-wc-price__ph strong {
  font-weight: 800;
  color: #fff
}

.mt-wc-price__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 14px
}

/* --- 05 before / after gallery -------------------------------------------
   The "after" image fills the frame; the "before" sits on top of it, clipped
   from the right by --p. The range input is laid over the whole frame and
   made transparent rather than opacity:0 — an opacity:0 element paints
   nothing, including its focus ring, and this control has to be usable by
   keyboard. Its track and thumb are cleared in both engines so only the
   drawn divider shows. --p defaults to 50%, so the cards still read as a
   split comparison if the script never runs. */
.mt-ba-grid {
  margin-top: 48px;
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
}

.mt-ba-card {
  margin: 0
}

.mt-ba-card__cap {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px
}

.mt-ba-card__name {
  font-weight: 800;
  color: var(--mt-navy)
}

/* the imagery is stand-in, and says so on its face — nobody should mistake
   these for client work. Remove with data-ba-placeholder once the real
   screenshots land. */
.mt-ba-card__flag {
  border: 1px dashed rgba(255, 107, 53, .55);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mt-orange-dark)
}

.mt-ba {
  --p: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--mt-border);
  background: var(--mt-navy);
  aspect-ratio: 16/10;
  touch-action: pan-y
}

.mt-ba__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.mt-ba__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--p)) 0 0)
}

/* stands in for a dated site until the real screenshots arrive */
.mt-ba__before .mt-ba__img {
  filter: grayscale(1) contrast(.82) brightness(.88)
}

.mt-ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--p);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(26, 31, 46, .22)
}

.mt-ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  color: var(--mt-navy);
  box-shadow: 0 8px 22px -6px rgba(26, 31, 46, .55)
}

.mt-ba__tag {
  position: absolute;
  top: 12px;
  z-index: 1;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(26, 31, 46, .72);
  color: #fff;
  backdrop-filter: blur(4px)
}

.mt-ba__tag--before {
  left: 12px
}

.mt-ba__tag--after {
  right: 12px;
  background: rgba(255, 107, 53, .92);
  color: var(--mt-navy)
}

/* Only at the extremes does the divider reach a label — then that one label
   fades, so the handle never sits on top of it. Everywhere in between, and
   with no script at all, both labels stay up. */
.mt-ba[data-ba-edge="start"] .mt-ba__tag--before {
  opacity: 0
}

.mt-ba[data-ba-edge="end"] .mt-ba__tag--after {
  opacity: 0
}

.mt-ba__tag {
  transition: opacity .2s ease
}

.mt-ba__range {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none
}

.mt-ba__range::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent
}

.mt-ba__range::-moz-range-track {
  height: 100%;
  background: transparent
}

.mt-ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: ew-resize
}

.mt-ba__range::-moz-range-thumb {
  width: 44px;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: ew-resize
}

.mt-ba__range:focus-visible {
  outline: 3px solid var(--mt-orange);
  outline-offset: -3px;
  border-radius: 18px
}

@media (prefers-reduced-motion:reduce) {
  .mt-ba__tag {
    transition: none
  }
}

/* --- 07 closing ----------------------------------------------------------
   The guarantee seal is a graphic the client still owes (design dependency in
   the copy doc). Until it arrives this is the same claim as a plain pill, so
   nothing on the page depends on the artwork. */
.mt-wc-seal {
  margin: 26px 0 0;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt-text-on-dark)
}

/* Nodes hidden at the client’s request. Hidden, never deleted, so the
   price can be restored to the button labels by dropping this rule. */
[data-wc-hide] {
  display: none !important
}