/* Sito pubblico di MISE. Usa i token di Industry (industry.css): stessi colori e font del
   gestionale, così chi arriva dal sito ritrova lo stesso mestiere dentro il prodotto.
   Nessun colore fuori dai token, tranne il rosso delle crepe, che qui è il tema. */

.sito {
  --crack: #b3492f;                       /* il colore della crepa: ruggine, non allarme */
  --ink: var(--color-accent-900);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  margin: 0;
}
.sito h1, .sito h2, .sito h3 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.sito p { margin: 0; }
.sito a { color: inherit; }
.sito ::selection { background: var(--color-accent-300); }

/* ---------- Barra in alto ---------- */
.s-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 12px max(16px, 5vw);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}
.s-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--font-heading);
  font-weight: 600; font-size: 22px; letter-spacing: .16em; }
.s-logo img { border-radius: 7px; }
.s-nav-links { display: flex; gap: 22px; margin-inline-start: auto; font-size: 15px; }
.s-nav-links a { text-decoration: none; color: color-mix(in srgb, var(--color-text) 72%, transparent); padding: 4px 0; }
.s-nav-links a:hover { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-accent); }
.s-nav-act { display: flex; align-items: center; gap: 10px; }
.s-lang { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--color-divider);
  background: var(--color-bg); color: inherit; border-radius: 0; }

.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid var(--color-text); background: transparent; color: var(--color-text);
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.s-btn:hover { transform: translateY(-1px); }
.s-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.s-btn.primary:hover { background: var(--color-accent-800); }
.s-btn.ghost { border-color: var(--color-divider); }
.s-btn.big { padding: 15px 26px; font-size: 17px; }

/* ---------- Apertura ---------- */
.s-hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  padding: clamp(56px, 10vw, 110px) max(16px, 5vw) clamp(64px, 11vw, 120px);
}
.s-hero::before {                                   /* carta millimetrata, come nel gestionale */
  content: ''; position: absolute; inset: 0; opacity: .1; pointer-events: none;
  background-image: linear-gradient(var(--paper) 1px, transparent 1px), linear-gradient(90deg, var(--paper) 1px, transparent 1px);
  background-size: 64px 64px;
}
.s-hero-in { position: relative; max-width: 1100px; margin: 0 auto; }
.s-hero h1 {
  font-size: clamp(38px, 7.2vw, 78px); line-height: .98; margin: 14px 0 0;
  text-wrap: balance;
}
.s-hero .s-lead { max-width: 60ch; margin-top: 22px; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.55;
  color: color-mix(in srgb, var(--paper) 82%, transparent); }
.s-kick { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .2em; font-size: 13px;
  color: color-mix(in srgb, currentColor 62%, transparent); margin: 0; }
.s-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.s-cta.center { justify-content: center; }
.s-hero .s-btn { border-color: var(--paper); color: var(--paper); }
.s-hero .s-btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.s-hero .s-btn.primary:hover { background: #fff; }
.s-note { margin-top: 14px; font-size: 14px; color: color-mix(in srgb, var(--paper) 58%, transparent); }

/* La crepa grande che taglia l'apertura */
.s-hero-art { position: absolute; inset: auto 0 -2px 0; height: 120px; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 0 60%, var(--color-bg) 60% 100%);
  clip-path: polygon(0 66%, 5% 52%, 9% 70%, 16% 48%, 21% 68%, 27% 45%, 33% 72%, 40% 50%, 46% 74%, 53% 46%, 59% 70%, 66% 44%, 72% 72%, 79% 48%, 85% 70%, 92% 46%, 100% 68%, 100% 100%, 0 100%);
}

/* ---------- Striscia di fatti, sotto l'apertura ---------- */
.s-strip { background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.s-strip ul { list-style: none; margin: 0 auto; padding: 18px max(16px, 5vw); max-width: 1180px;
  display: grid; gap: 14px 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.s-strip li { display: grid; gap: 2px; }
.s-strip b { font-family: var(--font-heading); font-size: 20px; font-weight: 600; }
.s-strip span { font-size: 14px; color: var(--soft); }

/* ---------- Sezioni ---------- */
.s-sec { padding: clamp(52px, 8vw, 96px) max(16px, 5vw); max-width: 1180px; margin: 0 auto; }
.s-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.s-head h2 { font-size: clamp(28px, 4.4vw, 48px); line-height: 1.02; margin-top: 10px; text-wrap: balance; }
.s-sub { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--soft); }

.rise { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* ---------- Le crepe ---------- */
.s-crepe { border-top: 1px solid var(--color-divider); }
.s-cracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.s-crack-card { position: relative; padding: 26px 24px 30px;
  border-top: 1px solid var(--color-divider); border-inline-start: 1px solid var(--color-divider); }
.s-cracks > :first-child { border-inline-start: 0; }
@media (max-width: 1000px) { .s-crack-card { border-inline-start: 0; } }
.s-crack-line { display: block; width: 100%; height: 12px; color: var(--crack); margin-bottom: 16px; }
.s-crack-n { font-family: var(--font-heading); font-size: 15px; letter-spacing: .2em; color: var(--crack); margin: 0 0 6px; }
.s-crack-card h3 { font-size: clamp(21px, 2.4vw, 26px); line-height: 1.1; }
.s-crack-body { display: grid; gap: 12px; margin-top: 14px; font-size: 15.5px; line-height: 1.5; }
.s-crack-scene { color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.s-tag { display: block; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .16em;
  font-size: 11px; color: var(--crack); margin-bottom: 3px; }
.s-tag.ok { color: var(--color-accent-700); }
.s-crack-fix { padding: 12px 14px; background: var(--color-accent-100); box-shadow: inset 3px 0 0 var(--color-accent-700); }

/* ---------- Il filo ---------- */
.s-flow { background: var(--color-surface); max-width: none; }
.s-flow > * { max-width: 1180px; margin-inline: auto; }
.s-steps { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.s-step { padding: 24px 22px; display: grid; gap: 12px;
  border-top: 1px solid var(--color-divider); border-inline-start: 1px solid var(--color-divider); }
.s-steps > :first-child { border-inline-start: 0; }
@media (max-width: 760px) { .s-step { border-inline-start: 0; } }
.s-step-n { font-family: var(--font-heading); font-size: 40px; line-height: 1; color: var(--color-accent-400); }
.s-step h3 { font-size: 22px; margin-top: 4px; }
.s-step p:last-child { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--soft); }

/* ---------- Schermate vere ---------- */
.s-shot-grid { display: grid; gap: 22px; grid-template-columns: repeat(12, 1fr); align-items: start; }
.s-shot { margin: 0; grid-column: span 12; }
.s-shot-img { background: var(--color-surface); border: 1px solid var(--color-divider);
  overflow: hidden; line-height: 0; box-shadow: var(--shadow-md); }
.s-shot-img img { width: 100%; height: auto; display: block; }
.s-shot.phone .s-shot-img { max-width: 290px; border-radius: 18px; aspect-ratio: 9 / 15; }
/* Del telefono si mostra la parte alta: è lì che succede quello che conta */
.s-shot.phone img { height: 100%; object-fit: cover; object-position: top center; }
.s-shot figcaption { display: grid; gap: 3px; margin-top: 10px; }
.s-shot figcaption b { font-family: var(--font-heading); font-size: 19px; font-weight: 600; }
.s-shot figcaption span { font-size: 14.5px; line-height: 1.5; color: var(--soft); }
@media (min-width: 760px) {
  .s-shot.wide { grid-column: span 7; }
  .s-shot-grid { grid-auto-flow: row dense; }
  .s-shot.phone { grid-column: span 5; }
  .s-shot.phone .s-shot-img { margin-inline: auto; }
}

/* ---------- Moduli ---------- */
.s-mods { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.s-mod-card { padding: 20px; border: 1px solid var(--color-divider); background: var(--color-bg);
  transition: border-color .15s ease, transform .15s ease; }
.s-mod-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.s-mod-card h3 { font-size: 20px; }
.s-mod-card p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--soft); }

/* ---------- Due mestieri ---------- */
.s-jobs-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.s-job { padding: 28px 26px; background: var(--ink); color: var(--paper); }
.s-job h3 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 8px; }
.s-job p:last-child { margin-top: 12px; font-size: 16px; line-height: 1.55;
  color: color-mix(in srgb, var(--paper) 80%, transparent); }

/* ---------- Prezzi ---------- */
.s-plans { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 28px; }
.s-plan { padding: 22px; border: 1px solid var(--color-divider); background: var(--color-bg); }
.s-plan .s-kick { color: var(--color-accent-700); font-size: 14px; }
/* Per chi è il piano: senza, il nome da solo non dice niente a chi guarda */
.s-plan-for { margin: 4px 0 0; font-size: 14px; color: var(--soft); }
.s-plan-price { font-family: var(--font-heading); font-size: 40px; line-height: 1; margin-top: 10px; }
.s-plan-price span { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--soft); }
.s-plan-trial { margin-top: 10px; font-size: 14px; color: var(--color-accent-700); font-weight: 600; }

/* ---------- Domande ---------- */
.s-faqs { display: grid; border-top: 1px solid var(--color-divider); }
.s-faq-item { border-bottom: 1px solid var(--color-divider); }
.s-faq-item summary { cursor: pointer; padding: 18px 4px; font-family: var(--font-heading); font-size: 21px;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.s-faq-item summary::-webkit-details-marker { display: none; }
.s-faq-item summary::after { content: '+'; font-size: 24px; color: var(--color-accent-700); }
.s-faq-item[open] summary::after { content: '−'; }
.s-faq-item p { padding: 0 4px 20px; max-width: 78ch; font-size: 16px; line-height: 1.6; color: var(--soft); }

/* ---------- Chiusura ---------- */
.s-end { background: var(--ink); color: var(--paper); text-align: center;
  padding: clamp(56px, 9vw, 110px) max(16px, 5vw); }
.s-end h2 { font-size: clamp(30px, 5vw, 56px); line-height: 1.02; text-wrap: balance; }
.s-end .s-btn { border-color: var(--paper); color: var(--paper); }
.s-end .s-btn.primary { background: var(--paper); color: var(--ink); }

/* ---------- Piede ---------- */
.s-foot { border-top: 1px solid var(--color-divider); padding: 30px max(16px, 5vw) 40px; }
.s-foot-in { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.s-foot .s-logo { font-size: 19px; }
.s-foot-note { margin-top: 8px; max-width: 46ch; font-size: 14px; color: var(--soft); }
.s-foot-links { display: grid; gap: 8px; font-size: 15px; }
.s-foot-links a { text-decoration: none; color: var(--soft); }
.s-foot-links a:hover { color: var(--color-text); }

@media (max-width: 720px) {
  .s-nav-links { display: none; }
  .s-nav-act { margin-inline-start: auto; }
  .s-cta .s-btn { flex: 1 1 100%; }
}