/* ============================================================
   Tomato AI — layout dedicato
   Hero con mini-dashboard, sequenza editoriale a tre passaggi
   (hairline + freccia, niente marker numerati) e lista editoriale
   a hairline con icone inline (niente icon-tile), sul modello di
   svc-dojo.css .dj-list/.dj-row.
   ============================================================ */

/* logo ufficiale: lockup verticale (icona + wordmark + tagline),
   sfondo bianco del PNG combacia con l'hero chiara */
.svc-tomato .hero__logo {
  height: clamp(84px, 10.5vw, 112px);
  width: auto;
  margin-bottom: 22px;
}

.tm-hero .wrap.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
}
@media (max-width: 860px) {
  .tm-hero .wrap.hero__inner {
    grid-template-columns: 1fr;
  }
  .tm-hero__visual {
    order: -1;
    margin-bottom: 6px;
  }
}
.tm-hero__visual {
  display: flex;
  justify-content: center;
}

/* ---- mini dashboard AI ---- */
.tm-insight {
  width: min(340px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: 0 24px 48px -28px rgba(32, 35, 42, 0.18);
}
.tm-insight__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.tm-insight__label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}
.tm-insight__badge {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  /* #1e9638 su questo sfondo chiaro è 3.8:1, sotto AA come testo (audit):
     scurito a #177a2e, ~5.4:1. Il verde chiaro resta solo decorativo altrove. */
  color: #177a2e;
  background: color-mix(in srgb, var(--accent2) 16%, transparent);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.tm-insight__num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
/* mini-grafico: serie unica (coerenza dato reale), mese in corso in
   evidenza. Asse e mesi minimi per leggibilità, niente barre bicolore
   senza significato (il precedente alternato rosso/verde non aveva base
   nei dati). */
.tm-insight__chart {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tm-insight__bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 78px;
}
.tm-insight__bars span {
  flex: 1;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent) 14%, transparent)
  );
}
.tm-insight__bars span.is-current {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}
.tm-insight__axis {
  height: 1px;
  background: var(--line);
}
.tm-insight__labels {
  display: flex;
  gap: 8px;
}
.tm-insight__labels span {
  flex: 1;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

/* ---- flusso a step: sequenza editoriale, NIENTE marker numerati in
   cerchio. Tre passaggi separati da hairline + freccia connettrice su
   desktop; hairline orizzontale su mobile. ---- */
.tm-steps {
  padding: clamp(40px, 6vw, 66px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tm-steps__title {
  margin-bottom: 32px;
}
.tm-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  border-top: 1px solid var(--line);
}
.tm-flow__step {
  position: relative;
  padding: 26px 30px 26px 0;
}
.tm-flow__step:not(:first-child) {
  padding-left: 30px;
}
.tm-flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.tm-flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -9px;
  width: 18px;
  height: 18px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  background-color: var(--muted);
}
.tm-flow__step h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--heading);
  margin-bottom: 6px;
}
.tm-flow__step p {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 34ch;
}
@media (max-width: 760px) {
  .tm-flow {
    grid-template-columns: 1fr;
  }
  .tm-flow__step {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
  }
  .tm-flow__step:last-child {
    border-bottom: none;
  }
  .tm-flow__step:not(:first-child) {
    padding-left: 0;
  }
  .tm-flow__step:not(:last-child)::before,
  .tm-flow__step:not(:last-child)::after {
    display: none;
  }
  .tm-flow__step p {
    max-width: none;
  }
}

/* ---- "Tutto sotto controllo": lista editoriale a hairline, icone inline
   (senza tile a sfondo), sul modello di svc-dojo.css .dj-list/.dj-row ---- */
.tm-list {
  border-top: 1px solid var(--line);
}
.tm-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.tm-row__icon {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 4px;
  color: var(--accent);
}
.tm-row:nth-child(even) .tm-row__icon {
  /* stesso fix AA del badge: #1e9638 come testo è 3.8:1, scurito a #177a2e */
  color: #177a2e;
}
.tm-row__body {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 4px 28px;
  flex: 1;
  align-items: baseline;
}
.tm-row__body h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.tm-row__body p {
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 52ch;
}
@media (max-width: 760px) {
  .tm-row__body {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* .cta (service.css) dipinge lo sfondo con --cta-bg, un gradient rosso, via
   background-image: i checker di contrasto statici che leggono solo
   background-color vedono "transparent" e segnalano il testo bianco come
   invisibile (falso positivo, audit "#ffffff su #ffffff"). Il rendering
   reale è corretto (bianco su gradient rosso ~5.5:1): aggiungiamo comunque
   un background-color di fallback identico al primo stop del gradient, così
   resta letto anche da tool che non interpretano i gradient. */
body.svc-tomato .cta {
  background-color: #ca2324;
}