/* ==========================================================================
   v2 — componenti delle pagine nuove (Soluzioni, Clienti, sottopagine Platform…).
   Solo classi v2-*: le pagine v1 non le usano, quindi restano intatte.
   Token e bottoni da site.css; stesso linguaggio di home e Piattaforma (Figma "New landing").
   ========================================================================== */

/* ---------- hero delle pagine interne ---------- */

.v2-hero {
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

.v2-hero h1 {
  max-width: 20ch;
  margin-top: 12px;
  font-size: clamp(2.2rem, 4.8vw, 3.875rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.v2-hero .lead {
  margin-top: 24px;
  max-width: 44em;
  font-size: clamp(1.1rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
}

.v2-hero .hero-actions {
  margin-top: 32px;
}

.v2-kicker {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--teal-ink);
}

.v2-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 0.875rem;
  color: var(--steel);
}

.v2-crumbs a {
  border-bottom: 1px solid var(--line);
}

.v2-crumbs a:hover {
  border-color: var(--ink);
}

.v2-crumbs .sep {
  color: #b5c0c6;
}

/* ---------- blocchi e intestazioni di sezione ---------- */

.v2-block {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 104px);
}

.v2-head {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.v2-head .lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

.v2-more {
  margin: 32px 0 0;
}

.v2-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
}

.v2-arrow {
  color: var(--teal-ink);
  font-weight: 500;
}

/* ---------- card con link ---------- */

.v2-cards {
  display: grid;
  gap: 16px;
}

.v2-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.v2-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

a.v2-card:hover {
  border-color: #b9c5cb;
  box-shadow: 0 12px 32px -20px rgba(21, 27, 33, 0.35);
  transform: translateY(-2px);
}

a.v2-card:focus-visible,
a.v2-agent:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
}

.v2-card h3 {
  font-size: 1.3rem;
  line-height: 1.2;
}

.v2-card p {
  margin: 0;
  flex: 1;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(32, 40, 48, 0.8);
}

.v2-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--steel);
}

.v2-card-foot .v2-arrow {
  margin-left: auto;
}

.section.mist .v2-card,
.section.mist .v2-agent {
  border-color: #dde4e7;
}

/* ---------- AgentCard: il problema come titolo, poi agente e risultato ---------- */

.v2-agents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}

.v2-agent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

a.v2-agent:hover {
  border-color: #b9c5cb;
  box-shadow: 0 12px 32px -20px rgba(21, 27, 33, 0.35);
}

.v2-agent h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.v2-agent-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--teal-ink);
}

.v2-agent-stat {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--steel);
}

.v2-agent-stat b {
  display: block;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.v2-agent-stat.is-word b {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.v2-agent-ctx {
  font-size: 0.8125rem;
  color: var(--steel);
}

.v2-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--steel);
}

.v2-badge.is-live {
  border-color: rgba(12, 143, 134, 0.35);
  background: rgba(20, 228, 204, 0.1);
  color: var(--teal-ink);
}

.v2-badge.is-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- evidenze ---------- */

.v2-proofs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-proofs a {
  display: block;
  height: 100%;
  padding: 24px;
  border-radius: var(--radius-m);
  background: #fff;
  border: 1px solid #dde4e7;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: border-color 0.2s var(--ease);
}

.v2-proofs a:hover {
  border-color: #b9c5cb;
}

/* ---------- processo per fasi ---------- */

.v2-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.v2-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
}

.v2-step-n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(26, 178, 175, 0.1);
  color: #1ab2af;
  font-size: 0.875rem;
  font-weight: 700;
}

.v2-step h3 {
  font-size: 1.2rem;
  line-height: 1.25;
}

.v2-step p {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.45;
  color: rgba(32, 40, 48, 0.8);
}

.v2-step .v2-save {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink);
}

.v2-step .v2-save b {
  margin-right: 4px;
  font-weight: 600;
  color: var(--teal-ink);
}

.v2-steps.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v2-steps.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- funzionalità (titolo + testo, senza link) ---------- */

.v2-features {
  display: grid;
  gap: 16px;
}

.v2-features.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-features.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-features.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.v2-feature {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
}

.section.mist .v2-feature {
  border-color: #dde4e7;
}

.v2-feature h3 {
  padding-left: 14px;
  border-left: 2px solid var(--teal);
  font-size: 1.2rem;
  line-height: 1.25;
}

.v2-feature p {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(32, 40, 48, 0.8);
}

.v2-note {
  max-width: 64ch;
  margin: 32px 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--steel);
}

.v2-callout {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  border: 1px solid #dde4e7;
  border-radius: var(--radius-m);
  background: #fff;
}

.v2-callout b {
  flex: none;
  font-size: 1.125rem;
}

.v2-callout span:not(.v2-arrow) {
  flex: 1;
  color: var(--steel);
}

.v2-callout:hover {
  border-color: #b9c5cb;
}

/* ---------- ArchitectureLayer: Knowledge -> Intelligence -> Execution ---------- */

.v2-os {
  display: grid;
  gap: 12px;
}

.v2-os-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: stretch;
}

.v2-os-col {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  transition: opacity 0.2s var(--ease);
}

.v2-os-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.v2-os-name b {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.v2-os-name span {
  font-size: 0.8125rem;
  color: var(--steel);
}

.v2-os-col ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-os-col a {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--mist);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.v2-os-col a:hover {
  border-color: var(--teal-ink);
  background: #fff;
}

.v2-os-arrow {
  align-self: center;
  justify-self: center;
  width: 14px;
  height: 12px;
  background: url("../img/platform/step-arrow.svg") no-repeat center / contain;
}

.v2-os-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.v2-os-band:hover {
  border-color: #b9c5cb;
}

.v2-os-band b {
  font-size: 1.0625rem;
  font-weight: 600;
}

.v2-os-band span {
  color: var(--steel);
}

.v2-os-gov {
  background: var(--slate);
  border-color: var(--slate);
  color: #fff;
}

.v2-os-gov:hover {
  border-color: var(--teal);
}

.v2-os-gov span {
  color: rgba(255, 255, 255, 0.72);
}

.v2-os-infra ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-os-infra li {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-size: 0.875rem;
}

/* one part highlighted, the rest recedes */
.v2-os.has-active .v2-os-col:not(.is-active),
.v2-os.has-active .v2-os-band:not(.is-active) {
  opacity: 0.55;
}

.v2-os .is-active {
  border-color: var(--teal-ink);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.v2-os-gov.is-active {
  border-color: var(--teal);
}

/* ---------- clienti: loghi, citazione ---------- */

.v2-center {
  text-align: center;
}

.v2-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 48px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.v2-logos img {
  width: auto;
  height: 34px;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
}

.v2-logos img.tall {
  height: 48px;
}

.v2-quote {
  margin: 16px 0 0;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-l);
  background: var(--slate);
  color: #fff;
}

.v2-quote blockquote {
  margin: 0;
}

.v2-quote p {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.v2-quote figcaption {
  margin-top: 20px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.68);
}

/* ---------- metriche con la loro fonte ---------- */

.v2-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.v2-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px;
  border: 1px solid #dde4e7;
  border-radius: var(--radius-m);
  background: #fff;
}

a.v2-metric:hover {
  border-color: #b9c5cb;
}

.v2-metric b {
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.v2-metric-what {
  font-weight: 500;
}

.v2-metric-src {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--steel);
}

/* ---------- gruppi per settore ---------- */

.v2-group + .v2-group {
  margin-top: clamp(40px, 5vw, 64px);
}

.v2-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.v2-group-head h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}

/* ---------- schede agente: ProcessFlow e dati principali ---------- */

.v2-hero-badges {
  margin-top: 24px;
}

.v2-badge.is-cap {
  border-color: transparent;
  background: var(--mist);
}

.v2-flow {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
}

/* the connector between consecutive steps */
.v2-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 44px;
  bottom: -13px;
  width: 2px;
  height: 14px;
  background: var(--teal);
}

.v2-flow-step h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  line-height: 1.3;
}

.v2-flow-step h3::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-soft);
}

.v2-flow-step.is-human {
  border-color: rgba(12, 143, 134, 0.35);
  background: rgba(20, 228, 204, 0.06);
}

.v2-flow-step.is-outcome {
  background: var(--slate);
  border-color: var(--slate);
  color: #fff;
}

.v2-flow-step p,
.v2-flow-step ul {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(32, 40, 48, 0.85);
}

.v2-flow-step ul {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  list-style: disc;
}

.v2-flow-step li::marker {
  color: var(--teal-ink);
}

.v2-flow-step.is-outcome p {
  color: rgba(255, 255, 255, 0.72);
}

.v2-flow-stat b {
  display: block;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
}

.v2-flow-ctx {
  margin-top: 8px !important;
  font-size: 0.875rem !important;
}

.v2-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.v2-split h2 {
  margin-bottom: 16px;
}

.v2-facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 8px 28px;
  border: 1px solid #dde4e7;
  border-radius: var(--radius-m);
  background: #fff;
}

.v2-facts > div {
  padding: 18px 0;
}

.v2-facts > div + div {
  border-top: 1px solid var(--line);
}

.v2-facts dt {
  margin-bottom: 8px;
  font-size: 0.8125rem;
  color: var(--steel);
}

.v2-facts dd {
  margin: 0;
}

.v2-facts ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-facts dd a {
  border-bottom: 1px solid var(--line);
}

.v2-facts dd a:hover {
  border-color: var(--ink);
}

.v2-apps-in {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v2-facts .v2-apps-in a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
}

.v2-apps-in img {
  border-radius: 5px;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .v2-cards.cols-4,
  .v2-features.cols-4,
  .v2-features.cols-3,
  .v2-steps,
  .v2-steps.cols-4,
  .v2-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .v2-os-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .v2-os-arrow { height: 28px; transform: rotate(90deg); }
  .v2-os-col { padding: 20px; }
  .v2-os-name { margin-bottom: 12px; padding-bottom: 10px; }
  .v2-os-col ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .v2-os-col a { padding: 8px 12px; font-size: 0.875rem; }
}

@media (max-width: 760px) {
  .v2-cards.cols-2,
  .v2-cards.cols-3,
  .v2-cards.cols-4,
  .v2-features.cols-2,
  .v2-features.cols-3,
  .v2-features.cols-4,
  .v2-steps,
  .v2-steps.cols-2,
  .v2-steps.cols-4,
  .v2-metrics { grid-template-columns: minmax(0, 1fr); }
  .v2-logos { gap: 20px 32px; }
  .v2-logos img { height: 26px; }
  .v2-logos img.tall { height: 38px; }
  .v2-card,
  .v2-step,
  .v2-feature { padding: 22px; }
  .v2-callout { flex-wrap: wrap; }
  .v2-split { grid-template-columns: minmax(0, 1fr); }
  .v2-flow-step { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 22px; }
  .v2-flow-step:not(:last-child)::after { left: 26px; }
  .v2-facts { padding: 4px 22px; }
}

@media (max-width: 640px) {
  .v2-hero h1 { overflow-wrap: break-word; hyphens: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-card,
  .v2-agent { transition: none; }
  a.v2-card:hover { transform: none; }
}

/* ---------- home guidata (dal 2026-10-01, restyling concordato con Codex) ---------- */
/* Manopole: varianza 4, motion 3, densità 5. Un solo accento (teal), tema chiaro fino alla banda scura del footer.
   Raggi della home: 24px superfici grandi, 12px componenti interni e selezioni, pill per bottoni e badge.
   Senza JS le voci dell'esploratore sono link alle pagine Soluzioni e alle schede; site.js le trasforma in bottoni. */

:root {
  --v2-r-lg: 24px;
  --v2-r-sm: 12px;
}

.v2-gh {
  padding-top: clamp(40px, 4.5vw, 64px);
  padding-bottom: clamp(56px, 6vw, 88px);
}

.v2-gh h1 {
  margin-top: 16px;
  font-size: clamp(2.375rem, 4.6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
  text-wrap: wrap;
}

.v2-gh .lead {
  max-width: 68ch;
  margin-top: 20px;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--steel);
}

.v2-gh + .hm-logos {
  margin-top: 0;
}

/* esploratore: ambito | processo | caso */
.v2-x {
  display: grid;
  grid-template-columns: 184px 232px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 32px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--v2-r-lg);
  background: var(--mist);
}

.v2-x-q {
  margin: 4px 12px 10px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.v2-x-opts {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-x-opt {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px 10px 16px;
  border: 0;
  border-radius: var(--v2-r-sm);
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: var(--steel);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.v2-x-proc .v2-x-opt {
  min-height: 48px;
  font-size: 1rem;
  line-height: 1.4;
}

.v2-x-opt:hover {
  background: var(--mist-2);
  color: var(--ink);
}

.v2-x-opt.is-on {
  background: #fff;
  font-weight: 600;
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--teal-ink);
}

.v2-x-opt:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 2px;
}

/* with JS one indicator per column slides to the chosen option (state change feedback) */
.v2-x-ind {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--teal-ink);
  pointer-events: none;
  transition: transform 0.2s var(--ease), height 0.2s var(--ease);
}

.v2-x.has-ind .v2-x-opt.is-on {
  box-shadow: none;
}

.v2-x-more {
  margin: 16px 12px 0 16px;
  font-size: 0.875rem;
}

.v2-x-case {
  min-width: 0;
  padding: 28px;
  border-radius: var(--v2-r-sm);
  background: #fff;
}

.v2-x-ctx {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--steel);
}

.v2-x-case h3 {
  margin-top: 8px;
  font-size: clamp(1.75rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.v2-x-change {
  max-width: 60ch;
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--steel);
}

.v2-x-result {
  margin: 20px 0 24px;
  padding: 16px 20px;
  border-radius: var(--v2-r-sm);
  background: rgba(20, 228, 204, 0.08);
}

.v2-x-result p {
  margin: 0;
}

.v2-x-value {
  font-size: 2.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}

.v2-x-result.is-word .v2-x-value {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.v2-x-result .v2-x-what {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink);
}

.v2-x-result .v2-x-status {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--steel);
}

/* the three steps: numbered, joined by a neutral line, no card per step */
.v2-x-rail {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: v2step;
}

.v2-x-rail > li {
  position: relative;
  padding-left: 36px;
  counter-increment: v2step;
}

.v2-x-rail > li::before {
  content: counter(v2step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--steel);
}

.v2-x-rail > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 26px;
  bottom: -14px;
  left: 11px;
  width: 1px;
  background: var(--line);
}

.v2-x-lab {
  margin: 0 0 6px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.v2-x-rail p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.v2-x-rail .v2-x-lab {
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.v2-x-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-x-docs li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mist);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* output structure: published names only */
.v2-out-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.v2-x-rail .v2-out-title {
  margin-bottom: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.v2-out-grid,
.v2-out-doc,
.v2-out-map {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.v2-out-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  list-style: none;
}

.v2-out-doc {
  display: grid;
  gap: 6px;
  padding-left: 1.4em;
}

.v2-out-doc li::marker {
  font-weight: 600;
  color: var(--steel);
}

.v2-out-map {
  display: grid;
  gap: 6px;
  list-style: none;
}

.v2-out-map li::before {
  content: "→";
  margin-right: 8px;
  color: var(--teal-ink);
}

.v2-x-rail .v2-out-ref {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--steel);
}

.v2-x-rail .v2-out-cap {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--steel);
}

.v2-x-human {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.v2-x-human p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--steel);
}

.v2-x-human .v2-x-lab {
  margin-bottom: 4px;
  font-size: 0.875rem;
  color: var(--ink);
}

.v2-x-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 24px;
}

.v2-x-actions .btn {
  white-space: nowrap;
}

.v2-x-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* sections after the hero */
.v2-hsec {
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: clamp(56px, 7vw, 88px);
}

.v2-hsec h2 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

/* proofs: asymmetric grid, the first tile spans two rows */
.v2-pts {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px;
}

.v2-pt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--v2-r-lg);
  background: #fff;
  color: inherit;
  transition: border-color 0.2s;
}

.v2-pt:hover {
  border-color: #b9c5cb;
}

.v2-pt.is-lead {
  min-height: 360px;
  background: var(--mist);
}

.v2-pt-num {
  font-size: 3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.v2-pt.is-lead .v2-pt-num {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
}

/* the lead tile: the number on top, its meaning and context at the bottom */
.v2-pt.is-lead .v2-pt-what {
  margin-top: auto;
  font-size: 1.25rem;
}

.v2-pt.is-lead .v2-pt-ctx {
  margin-top: 8px;
}

.v2-pt-what {
  max-width: 34ch;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
}

.v2-pt-extra {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--steel);
}

.v2-pt-ctx {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.8125rem;
  color: var(--steel);
}

/* how it works: the real Notebook screenshot */
.v2-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--v2-r-sm);
  background: #fff;
  box-shadow: 0 16px 40px rgba(23, 78, 84, 0.08);
}

.v2-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.v2-hhow-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

.v2-shot-zoom {
  display: none;
}

/* sovereignty: real photo + points, then the deployment targets */
.v2-hsov-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 48px;
}

.v2-hsov-photo {
  margin: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--v2-r-lg);
  background: var(--mist);
}

.v2-hsov-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-hsov-text .lead {
  margin-top: 12px;
  color: var(--steel);
}

.v2-hsov-pts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.v2-hsov-pts h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.v2-hsov-pts p {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--steel);
}

.v2-hsov-text .row {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.v2-hsov-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.v2-hsov-logos p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--steel);
}

.v2-hsov-logos ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-hsov-logos img {
  display: block;
  filter: grayscale(1);
  opacity: 0.7;
}

/* FAQ */
.v2-hfaq .hm-head-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
}

.v2-hfaq h2 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600;
}

.v2-hfaq summary {
  font-size: 1.125rem;
}

/* logo strip: pauses on hover; static rows when motion is reduced (site.js skips the duplicate) */
.hm-logos .marquee:hover .marquee-track,
.hm-logos.is-paused .marquee-track {
  animation-play-state: paused;
}

.v2-logo-ctl {
  margin: 16px 0 0;
  text-align: center;
}

.v2-logo-pause {
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--steel);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.v2-logo-pause:hover {
  color: var(--ink);
}

.v2-logo-pause:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 2px;
}

.hm-logos .marquee-track.is-static {
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  row-gap: 24px;
  animation: none;
  transform: none;
}

@media (max-width: 1099px) {
  .v2-x { grid-template-columns: 200px minmax(0, 1fr); }
  .v2-x-proc { grid-column: 2; }
  .v2-x-cases { grid-column: 2; }
  .v2-x-amb { grid-row: span 2; }
  .v2-hsov-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .v2-hsov-photo { aspect-ratio: 16 / 9; }
}

@media (max-width: 767px) {
  .v2-x { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px; }
  .v2-x-amb,
  .v2-x-proc,
  .v2-x-cases { grid-column: auto; grid-row: auto; }
  .v2-x-q { margin-left: 4px; }
  .v2-x-amb .v2-x-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .v2-x-amb .v2-x-opts li:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
  .v2-x-amb .v2-x-opt { height: 100%; padding: 10px 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .v2-x-amb .v2-x-opt.is-on,
  .v2-x.has-ind .v2-x-amb .v2-x-opt.is-on { box-shadow: inset 0 0 0 2px var(--teal-ink); }
  .v2-x-amb .v2-x-ind { display: none; }
  .v2-x-more { margin-left: 4px; }
  .v2-x-case { padding: 16px; }
  .v2-x-case h3 { font-size: 1.75rem; }
  .v2-out-grid { grid-template-columns: minmax(0, 1fr); }
  .v2-x-actions .btn { white-space: normal; }
  .v2-pts { grid-template-columns: minmax(0, 1fr); }
  .v2-pt { padding: 24px; }
  .v2-pt.is-lead { min-height: 0; }
  .v2-pt.is-lead .v2-pt-num { font-size: 3.5rem; }
  .v2-hsov-pts { grid-template-columns: minmax(0, 1fr); }
  .v2-shot-zoom { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-x-opt,
  .v2-x-ind,
  .v2-pt { transition: none; }
}

/* ---------- motion della home (manopole 5 / 8 / 5, concordato con Codex) ---------- */
/* Ingressi lenti (0,9-1,2 s) e in cascata (70-120 ms), un flusso del rail che si ripete mentre il caso è visibile,
   il Notebook che si raddrizza e mostra la risposta collegata alla fonte. Solo transform e opacity.
   html.v2-still (bottone "Ferma il movimento") ferma i loop; prefers-reduced-motion: tutto fermo nella posa finale. */

:root {
  --v2-ease-in: cubic-bezier(0.16, 1, 0.3, 1);
  --v2-ease-fb: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* hero: two aurora layers behind the explorer, title words in line masks */
.v2-gh {
  position: relative;
  overflow: hidden;
}

.v2-gh > .container {
  position: relative;
}

.v2-gh .container > * {
  position: relative;
  z-index: 1;
}

.v2-gh .container > .v2-aurora {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.v2-gh .container > .v2-aurora.is-a {
  top: -260px;
  right: -300px;
  width: 820px;
  height: 820px;
  background: radial-gradient(closest-side, rgba(20, 228, 204, 0.16), rgba(20, 228, 204, 0.06) 55%, rgba(20, 228, 204, 0));
}

.v2-gh .container > .v2-aurora.is-b {
  top: 380px;
  left: -360px;
  width: 720px;
  height: 720px;
  background: radial-gradient(closest-side, rgba(12, 143, 134, 0.1), rgba(12, 143, 134, 0.03) 55%, rgba(12, 143, 134, 0));
}

.v2-l {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.v2-w {
  display: inline-block;
}

/* rail: lit numbers over the grey ones, one teal track with a pulse (sized and played by site.js) */
.v2-x-rail > li::before {
  z-index: 2;
}

.v2-x-n {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--teal-ink);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.v2-x-track {
  position: absolute;
  z-index: 1;
  top: 11px;
  left: 11px;
  display: none;
  width: 1px;
  pointer-events: none;
}

.v2-x-rail.has-track .v2-x-track {
  display: block;
}

.v2-x-fill {
  position: absolute;
  inset: 0;
  background: var(--teal-ink);
  transform-origin: top;
}

.v2-x-pulse {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal-ink);
  box-shadow: 0 0 0 5px rgba(20, 228, 204, 0.3);
  opacity: 0;
}

.v2-x-hmark {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--teal-ink);
  vertical-align: 0.05em;
}

/* the result box: a light sweep crosses it once when the case appears */
.v2-x-result {
  position: relative;
  overflow: hidden;
}

.v2-x-result::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-110%);
  pointer-events: none;
}

/* proofs: a wrapper per tile (reveal) and the tile itself (tilt) */
.v2-ptw {
  display: flex;
  perspective: 900px;
}

.v2-ptw.is-lead {
  grid-row: span 2;
}

.v2-ptw > .v2-pt {
  flex: 1;
  min-width: 0;
}

.v2-pt {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
}

.v2-pt-num {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.v2-pt-num > span {
  display: block;
}

.v2-pt-glow {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 228, 204, 0.16), rgba(20, 228, 204, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--v2-ease-fb);
}

.v2-pt.is-glow .v2-pt-glow {
  opacity: 1;
}

.v2-pt:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
}

/* the logo strip fades at the edges */
.hm-logos .marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* notebook: perspective stage, then the answer and its source outlined in turn */
.v2-shot-stage {
  perspective: 1600px;
}

.v2-shot {
  position: relative;
  transform-origin: center top;
}

.v2-hl {
  position: absolute;
  border: 2px solid var(--teal-ink);
  border-radius: 10px;
  background: rgba(20, 228, 204, 0.08);
  box-shadow: 0 0 0 6px rgba(20, 228, 204, 0.12);
  opacity: 0;
  pointer-events: none;
}

.v2-hl.is-answer {
  top: 39.5%;
  left: 6.8%;
  width: 46.4%;
  height: 23.6%;
}

.v2-hl.is-source {
  top: 48.6%;
  left: 59%;
  width: 36.2%;
  height: 16.6%;
}

/* sovereignty: the photo reveals (figure) while the image drifts with the scroll (img) */
.v2-hsov-photo img {
  transform: scale(1.12);
}

.v2-arrow {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  /* hero, on first paint */
  .v2-gh .container > .v2-aurora.is-a {
    animation: v2-aurora-in 2.4s var(--v2-ease-in) both, v2-drift-a 26s ease-in-out 2.4s infinite alternate;
  }
  .v2-gh .container > .v2-aurora.is-b {
    animation: v2-aurora-in 2.4s var(--v2-ease-in) 0.3s both, v2-drift-b 32s ease-in-out 2.7s infinite alternate;
  }
  .v2-gh .v2-hero-kicker { animation: v2-up 0.9s var(--v2-ease-in) 0.1s both; --y: 10px; }
  .v2-w { animation: v2-word 1.1s var(--v2-ease-in) both; animation-delay: calc(0.25s + var(--i) * 0.08s); }
  .v2-gh .lead { animation: v2-up 1.1s var(--v2-ease-in) 1s both; --y: 16px; }
  .v2-gh .v2-x { animation: v2-up 1.2s var(--v2-ease-in) 1.2s both; --y: 40px; }
  .v2-x-amb li { animation: v2-side 0.9s var(--v2-ease-in) both; animation-delay: calc(1.5s + var(--i) * 0.08s); }

  /* process options and case blocks: replayed every time a list or a case is shown */
  .v2-x-procs { --b: 0.05s; }
  .v2-x-procs.is-first { --b: 1.8s; }
  .v2-x-procs li { animation: v2-side 0.9s var(--v2-ease-in) both; animation-delay: calc(var(--b) + var(--i) * 0.1s); }
  .v2-x-procs .v2-x-more { animation: v2-up 0.9s var(--v2-ease-in) both; animation-delay: calc(var(--b) + 0.35s); --y: 8px; }

  .v2-x-case { --b: 0.1s; }
  .v2-x-case.is-first { --b: 2s; }
  .v2-x-case > *,
  .v2-x-rail > li { animation: v2-up 0.95s var(--v2-ease-in) both; --y: 18px; }
  .v2-x-case > .v2-x-ctx { animation-delay: var(--b); }
  .v2-x-case > h3 { animation-delay: calc(var(--b) + 0.08s); }
  .v2-x-case > .v2-x-change { animation-delay: calc(var(--b) + 0.18s); }
  .v2-x-case > .v2-x-result { animation-delay: calc(var(--b) + 0.28s); }
  .v2-x-case > .v2-x-rail { animation: none; }
  .v2-x-rail > li:nth-child(1) { animation-delay: calc(var(--b) + 0.4s); }
  .v2-x-rail > li:nth-child(2) { animation-delay: calc(var(--b) + 0.52s); }
  .v2-x-rail > li:nth-child(3) { animation-delay: calc(var(--b) + 0.64s); }
  .v2-x-case > .v2-x-human { animation-delay: calc(var(--b) + 0.78s); }
  .v2-x-case > .v2-x-actions { animation-delay: calc(var(--b) + 0.9s); }
  .v2-x-docs li,
  .v2-out-grid li,
  .v2-out-doc li,
  .v2-out-map li { animation: v2-pop 0.8s var(--v2-ease-in) both; }
  .v2-x-docs li:nth-child(1) { animation-delay: calc(var(--b) + 0.55s); }
  .v2-x-docs li:nth-child(2) { animation-delay: calc(var(--b) + 0.65s); }
  .v2-x-docs li:nth-child(3) { animation-delay: calc(var(--b) + 0.75s); }
  .v2-out-grid li:nth-child(1), .v2-out-doc li:nth-child(1), .v2-out-map li:nth-child(1) { animation-delay: calc(var(--b) + 0.8s); }
  .v2-out-grid li:nth-child(2), .v2-out-doc li:nth-child(2), .v2-out-map li:nth-child(2) { animation-delay: calc(var(--b) + 0.9s); }
  .v2-out-grid li:nth-child(3), .v2-out-doc li:nth-child(3), .v2-out-map li:nth-child(3) { animation-delay: calc(var(--b) + 1s); }
  .v2-out-grid li:nth-child(4), .v2-out-doc li:nth-child(4), .v2-out-map li:nth-child(4) { animation-delay: calc(var(--b) + 1.1s); }
  .v2-x-result::after { animation: v2-sheen 1.6s var(--v2-ease-in) both; animation-delay: calc(var(--b) + 0.9s); }

  /* micro-interactions */
  .v2-x-opt { transition: background-color 0.3s, color 0.3s, transform 0.5s var(--v2-ease-in); }
  .v2-x-opt:hover:not(.is-on) { transform: translateX(3px); }
  .v2-gh .btn,
  .v2-hsec .btn {
    transition: transform 0.35s var(--v2-ease-fb), background-color 0.25s, border-color 0.25s, color 0.25s;
  }
  .v2-gh .btn:hover,
  .v2-hsec .btn:hover { transform: translateY(-1px); }
  .v2-gh .btn:active,
  .v2-hsec .btn:active { transform: scale(0.98); transition-duration: 0.1s; }
  .v2-arrow { transition: transform 0.35s var(--v2-ease-fb); }
  a:hover > .v2-arrow,
  a:focus-visible > .v2-arrow,
  .v2-pt:hover .v2-arrow,
  .v2-pt:focus-visible .v2-arrow { transform: translate(3px, -3px); }
  .v2-hsov-logos img { transition: opacity 0.4s; }
  .v2-hsov-logos li:hover img { opacity: 1; }

  /* below the fold: groups get .is-in from site.js; the hidden pose is set without a transition */
  .v2-motion .v2-a:not(.is-in) { opacity: 0; transform: translateY(var(--y, 28px)); }
  .v2-motion .v2-a.is-in {
    transition: opacity 1.1s var(--v2-ease-in), transform 1.1s var(--v2-ease-in);
    transition-delay: var(--d, 0ms);
  }
  .v2-motion .v2-wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .v2-motion .v2-wd { display: inline-block; --y: 110%; }
  .v2-motion .v2-hsov-photo.v2-a:not(.is-in) { transform: scale(0.94); }
  .v2-motion .v2-hsov-photo.v2-a.is-in { transition-duration: 1.4s; }
  .v2-motion .v2-pts:not(.is-in) .v2-pt-num > span { transform: translateY(105%); }
  .v2-motion .v2-pts.is-in .v2-pt-num > span { transition: transform 1.2s var(--v2-ease-in); }
  .v2-motion .v2-pts.is-in .v2-ptw:nth-child(1) .v2-pt-num > span { transition-delay: 0.25s; }
  .v2-motion .v2-pts.is-in .v2-ptw:nth-child(2) .v2-pt-num > span { transition-delay: 0.4s; }
  .v2-motion .v2-pts.is-in .v2-ptw:nth-child(3) .v2-pt-num > span { transition-delay: 0.55s; }

  /* the notebook story, once the screenshot is in place */
  .v2-shot.is-in .v2-hl.is-answer { animation: v2-hl-answer 7s ease-in-out 1.2s infinite; }
  .v2-shot.is-in .v2-hl.is-source { animation: v2-hl-source 7s ease-in-out 1.2s infinite; }

  /* continuous motion pauses off screen and with the "stop" control */
  .v2-gh.is-off .container > .v2-aurora,
  .v2-still .v2-gh .container > .v2-aurora,
  .v2-shot.is-off .v2-hl,
  .v2-still .v2-hl,
  .v2-still .hm-logos .marquee-track { animation-play-state: paused; }
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .v2-shot {
      animation: v2-settle 1s linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .v2-hsov-photo img {
      animation: v2-parallax 1s linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@media (max-width: 767px) {
  .v2-ptw.is-lead { grid-row: auto; }
  .v2-gh .container > .v2-aurora.is-a { top: -200px; right: -260px; width: 520px; height: 520px; }
  .v2-gh .container > .v2-aurora.is-b { top: 520px; left: -280px; width: 480px; height: 480px; }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .v2-gh .v2-x { --y: 24px; }
  .v2-motion .v2-a:not(.is-in) { --y: 18px; }
  .v2-motion .v2-wd { --y: 110%; }
}

@keyframes v2-up { from { opacity: 0; transform: translateY(var(--y, 16px)); } }
@keyframes v2-side { from { opacity: 0; transform: translateX(-14px); } }
@keyframes v2-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
@keyframes v2-word { from { transform: translateY(110%); } }
@keyframes v2-sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes v2-aurora-in { from { opacity: 0; transform: translate3d(40px, -30px, 0) scale(0.9); } }
@keyframes v2-drift-a { to { transform: translate3d(-90px, 70px, 0) scale(1.12); } }
@keyframes v2-drift-b { to { transform: translate3d(110px, -60px, 0) scale(1.1); } }
@keyframes v2-settle { from { transform: rotateX(12deg) scale(0.92); } to { transform: none; } }
@keyframes v2-parallax { from { transform: translateY(-5%) scale(1.12); } to { transform: translateY(5%) scale(1.12); } }
@keyframes v2-hl-answer {
  0%, 6% { opacity: 0; transform: scale(0.98); }
  14%, 40% { opacity: 1; transform: none; }
  50%, 100% { opacity: 0; transform: none; }
}
@keyframes v2-hl-source {
  0%, 36% { opacity: 0; transform: scale(0.98); }
  46%, 76% { opacity: 1; transform: none; }
  86%, 100% { opacity: 0; transform: none; }
}