/* ============================================================
   MAVIE — Automations page
   Reuses site.css tokens + .board/.job/.promises components.
   Adds the hero "enquiry flow" signature.
   ============================================================ */

.auto-hero { padding: 76px 0 64px; }
.auto-hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.auto-hero h1 { font-size: clamp(40px, 5.2vw, 60px); margin-bottom: 20px; }
.auto-hero h1 em { font-style: normal; color: var(--viridian); }
.auto-hero .lede { margin-bottom: 22px; }
.auto-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- the signature: what happens when someone gets in touch ---- */

.flow {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 24px 28px;
  box-shadow: 0 22px 50px -24px rgba(23,32,31,.22);
}
.flow__label {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 18px;
}
.flow__ins { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.flow__pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--sunk); border-radius: 99px;
  padding: 9px 15px; font-family: var(--f-display); font-weight: 500; font-size: 14.5px;
}
.flow__pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.flow__pill--call i { background: #C0552F; }
.flow__pill--wa   i { background: #1FA855; }
.flow__pill--form i { background: #2456C4; }

.flow__arrow { text-align: center; color: var(--line); font-size: 24px; line-height: 1; margin: 12px 0; }

.flow__hub {
  position: relative; text-align: center;
  background: var(--viridian); color: var(--paper);
  border-radius: 12px; padding: 20px 22px;
  font-family: var(--f-display); font-weight: 600; font-size: 20px;
}
.flow__hub small {
  display: block; font-family: var(--f-body); font-weight: 400; font-size: 14.5px;
  opacity: .82; margin-top: 5px;
}
.flow__hub::before {
  content: ""; position: absolute; top: 16px; right: 16px;
  width: 9px; height: 9px; border-radius: 50%; background: #6FE3B0;
  box-shadow: 0 0 0 0 rgba(111,227,176,.6);
  animation: flow-pulse 2.4s ease-out infinite;
}
@keyframes flow-pulse {
  70% { box-shadow: 0 0 0 12px rgba(111,227,176,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,227,176,0); }
}

.flow__out { text-align: center; margin-top: 2px; }
.flow__pill--out {
  background: color-mix(in srgb, var(--brass) 10%, #fff);
  border-color: color-mix(in srgb, var(--brass) 45%, transparent);
  color: var(--ink); font-weight: 600;
}
.flow__pill--out i { background: var(--brass); }

/* small caption under the card */
.flow__note { text-align: center; margin-top: 14px; }

/* ---- the gated premium: voice agent ---- */

.voice {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: start;
  border: 1px solid var(--line); border-radius: 14px; padding: 36px 34px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 7%, #fff), #fff);
}
.voice h2 em { font-style: normal; color: var(--viridian); }
.voice__proof { list-style: none; margin-top: 20px; }
.voice__proof li {
  padding: 9px 0 9px 26px; position: relative;
  color: var(--muted); font-size: 16px; border-bottom: 1px solid var(--sunk);
}
.voice__proof li::before {
  content: "✓"; position: absolute; left: 0; color: var(--viridian);
  font-family: var(--f-mono); font-size: 13px;
}
.voice__price {
  border-left: 1px solid var(--line); padding-left: 32px;
  display: flex; flex-direction: column; align-items: flex-start;
}

/* ---- reliability strip already uses .promises from site.css ---- */

@media (max-width: 900px) {
  .auto-hero__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 820px) {
  .voice { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .voice__price { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__hub::before { animation: none; }
}