/* ============================================================
   page-cnc.css — cnc.html-specific styles (Quick 260612-oix)

   Owns ALL .cnc- prefixed classes. Loaded AFTER /css/base.css.
   DO NOT inherit from page-home.css / page-servizi.css / page-infotime.css.
   Cross-page primitives (.svc-icon, .sec-label, .btn-*) live in base.css.
   Reuses base.css @keyframes pulse (Section 12) for the live-status dot —
   NO new keyframe is defined here.

   Mood: industrial / technical — mono micro-labels, accent cyan on dark,
   a terminal/DRO-style live-status strip, large ruled numerals.
   Tokens only: --accent, --accent-2, --bg, --bg-2, --fg, --fg-dim,
   --fg-mute, --line, --line-2, --font-mono, --font-serif, --pad-section.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   Hero — left-rail intro, mirrors infotime .it-hero cadence
   ─────────────────────────────────────────────────────────────*/
.cnc-hero {
  padding: 6rem 0 4rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cnc-hero .frame {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.cnc-hero .sec-label {
  text-align: left;
  margin-bottom: 1.25rem;
}
.cnc-hero-art {
  color: var(--fg-mute);
  justify-self: center;
  width: 100%;
  max-width: 30rem;
}
.cnc-hero-art svg {
  width: 100%;
  height: auto;
  display: block;
}
.cnc-hero-art .art-accent { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .cnc-hero-art .art-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: pulse 2s ease-in-out infinite;
  }
}
.cnc-hero h1 {
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.05;
  font-size: clamp(2.75rem, 7vw, 5.75rem);
  max-width: 16ch;
  color: var(--fg);
}
.cnc-hero h1 em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--accent);
}
.cnc-hero p.lead {
  margin-top: 1.5rem;
  max-width: 42rem;
}
.cnc-hero-cta {
  margin-top: 2.5rem;
}

/* ─────────────────────────────────────────────────────────────
   Generic block scaffold (left-aligned, ruled top border)
   ─────────────────────────────────────────────────────────────*/
.cnc-block {
  padding: var(--pad-section) 0;
  border-top: 1px solid var(--line);
}
.cnc-block .frame {
  max-width: 72rem;
}
.cnc-block .sec-label {
  text-align: left;
}
.cnc-block .cnc-h {
  text-align: left;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-size: clamp(2rem, 4vw, 3.25rem);
  max-width: 20ch;
  margin: 0;
  color: var(--fg);
}
.cnc-block .cnc-h em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -.01em;
}
.cnc-block .cnc-sub {
  margin-top: 1.25rem;
  max-width: 46rem;
}

/* ─────────────────────────────────────────────────────────────
   App showcase — real screenshot in a framed device-style figure
   ─────────────────────────────────────────────────────────────*/
.cnc-shot {
  margin-top: 3.5rem;
  border: 1px solid var(--line-2);
  border-radius: 0.875rem;
  background: var(--bg-2);
  padding: 0.5rem 0.5rem 0;
  overflow: hidden;
  box-shadow: 0 1.5rem 3.5rem -1.5rem rgba(0, 0, 0, .55);
}
.cnc-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem 0.5rem 0 0;
  border: 1px solid var(--line);
}
.cnc-shot figcaption {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--fg-mute);
  text-align: center;
  padding: 1rem 1.25rem 1.125rem;
}
.cnc-shot figcaption strong {
  color: var(--fg-dim);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   Two modes — asymmetric side-by-side panels
   ─────────────────────────────────────────────────────────────*/
.cnc-modes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
}
.cnc-mode {
  position: relative;
  padding: 2.25rem 2rem 2rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.cnc-mode:hover {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.015);
}
.cnc-mode .svc-icon {
  margin: 0;
}
.cnc-mode-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.cnc-mode h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: var(--fg);
}
.cnc-mode-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cnc-mode-list li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-dim);
  padding-left: 1.4rem;
  position: relative;
}
.cnc-mode-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────────────
   Problem — pain list, muted ✕ markers (contrast to solution →)
   ─────────────────────────────────────────────────────────────*/
.cnc-pains {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 2.5rem;
}
.cnc-pains li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-dim);
  padding-left: 1.6rem;
  position: relative;
}
.cnc-pains li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* ─────────────────────────────────────────────────────────────
   Steps — 3 numbered rows, big mono numerals
   ─────────────────────────────────────────────────────────────*/
.cnc-steps-list {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
}
.cnc-step {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr;
  gap: 1.5rem 2.5rem;
  align-items: start;
  padding: 2.25rem 0;
  border-top: 1px solid var(--line);
}
.cnc-step:last-child {
  border-bottom: 1px solid var(--line);
}
.cnc-step-n {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: color-mix(in oklab, var(--accent) 80%, var(--fg));
}
.cnc-step-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.7rem;
}
.cnc-step-ic {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
  background: var(--accent-soft);
  color: var(--accent);
}
.cnc-step-ic svg {
  width: 1.4rem;
  height: 1.4rem;
}
.cnc-step-body h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  color: var(--fg);
}
.cnc-step-body p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--fg-dim);
  margin: 0;
  max-width: 52ch;
}

/* ─────────────────────────────────────────────────────────────
   Controls / machines grid
   ─────────────────────────────────────────────────────────────*/
.cnc-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin-top: 4rem;
}
.cnc-card {
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cnc-card-k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.cnc-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--fg);
}
.cnc-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cnc-card li {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fg-dim);
}
.cnc-card-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cnc-chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 0.4rem;
  background: color-mix(in oklab, var(--accent) 4%, transparent);
}
.cnc-grid-note {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
}
.cnc-grid-note strong {
  color: var(--accent);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────
   Proof band — sober, centered, restrained
   ─────────────────────────────────────────────────────────────*/
.cnc-proof {
  padding: 5rem 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.cnc-proof .frame {
  max-width: 56rem;
}
.cnc-proof p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.4;
  color: var(--fg);
  margin: 1.25rem auto 0;
  max-width: 28ch;
  text-wrap: balance;
}
.cnc-proof p em {
  font-style: italic;
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
   Final CTA — centered, mirrors infotime .it-cta
   ─────────────────────────────────────────────────────────────*/
.cnc-cta {
  padding: 6rem 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.cnc-cta .sec-label {
  text-align: center;
}
.cnc-cta h2 {
  margin: 0 auto;
}
.cnc-cta p.lead {
  margin: 1.5rem auto 0;
  max-width: 34rem;
}
.cnc-cta-row {
  margin-top: 2.5rem;
  display: inline-flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────
   Mobile breakpoint (single site breakpoint, infotime convention)
   ─────────────────────────────────────────────────────────────*/
@media (max-width: 900px) {
  .nav { display: none; }
  .cnc-hero {
    padding: 3.5rem 0 2.5rem;
  }
  .cnc-hero .frame {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .cnc-hero-art {
    order: -1;
    max-width: 22rem;
  }
  .cnc-hero h1 {
    font-size: clamp(2.25rem, 9vw, 3rem);
    max-width: none;
  }
  .cnc-block {
    padding: 5rem 0;
  }
  .cnc-modes-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .cnc-pains {
    grid-template-columns: 1fr;
  }
  .cnc-step {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.75rem 0;
  }
  .cnc-step-n {
    font-size: clamp(2rem, 12vw, 3rem);
  }
  .cnc-proof {
    padding: 3.5rem 0;
  }
  .cnc-cta {
    padding: 4rem 0;
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .cnc-modes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}