/* ==========================================================================
   Pagina Kart, piano v3 (P2.5): capitoli 5, 7, 8 e il fondo pagina scuro.
   JS in t4-kart-story.js (fondo pagina: t4-next.js).
   - .t4km  "Motore 4 tempi da gara": titolo a inchiostro e step dei componenti
            (t4fx.steps). Colonna sinistra 40% a cornici da scheda tecnica
            (linee sottili, quadratini da 6px #192B88 agli incroci); a destra
            il pannello #0e1430 fissato da 992px, con griglia da disegno
            tecnico #2448d8 al 10%, croci #86a0ff, scontorno e callout in vetro.
            Ogni visual è opaco: t4fx.steps li sovrappone e fa sfumare il nuovo
            sopra il precedente.
   - .t4kn  "Il T4 in numeri": fascia col gradiente delle testate e i numeri
            a scheda tecnica (2 colonne da 640px); ogni cifra rulla una volta
            (t4fx.odometer) quando entra in vista (richieste v4, T5).
   - .t4kc  "Manutenzione, costi, praticità": pannello arrotondato con le
            pillole (EXR di Radian); da telefono visual, card aperta, pillole.
   - .t4kv  "Video manutenzione" (richieste v4, 19/10): fascia scura subito sotto
            "Kart usati" (dal 22/10), testo a sinistra e lettore 16:9 a destra, parte
            solo al clic; sotto, l'elenco degli episodi se ce n'è più d'uno.
   - .t4nx--dark  variante scura della sezione di fine pagina di t4-next.js
            (solo qui: le altre pagine la tengono chiara).
   Token, .t4-pill, .t4-ph e gli stili del kit da t4-fx.css. Misure in px con
   clamp() (la root del tema cambia con la larghezza). Prima lo stato finale,
   poi il movimento dentro (prefers-reduced-motion: no-preference).
   ========================================================================== */
.t4km, .t4kn, .t4kc, .t4kv { --t4k-gut: max(18px, 4.8vw); box-sizing: border-box; position: relative; }
.t4kv *, .t4kv *::before, .t4kv *::after { box-sizing: border-box; }
.t4km *, .t4km *::before, .t4km *::after,
.t4kn *, .t4kn *::before, .t4kn *::after,
.t4kc *, .t4kc *::before, .t4kc *::after { box-sizing: border-box; }
.t4km :focus-visible, .t4kc :focus-visible { outline: 2px solid var(--t4-blue); outline-offset: 3px; }
.t4kn :focus-visible { outline: 2px solid var(--t4-sky); outline-offset: 3px; }
/* stessa colonna delle sezioni del tema (.container-grid) */
.t4km__wrap, .t4kc__wrap { margin: 0 auto; padding: 0 var(--t4k-gut); }
@media (min-width: 992px) {
  .t4km__wrap, .t4kc__wrap, .t4kn__wrap, .t4kv__wrap { max-width: calc(108.375rem + 2 * var(--t4k-gut)); }
}
.t4km__k, .t4kn__k, .t4kc__k { font-family: var(--t4-mono); font-size: 12px; letter-spacing: .1em; line-height: 1.3; margin: 0 0 18px; opacity: .75; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   5 · Motore 4 tempi da gara
   -------------------------------------------------------------------------- */
.t4km { background: var(--t4-page); color: var(--t4-navy); padding: clamp(72px, 8vw, 150px) 0 clamp(56px, 6vw, 112px); }
.t4km__intro { margin-bottom: clamp(36px, 4.4vw, 80px); }
/* copia "fantasma" #192B88 al 20%; sopra, la copia a inchiostro di t4fx.ink */
.t4km .t4km__giant {
  color: rgba(25, 43, 136, .2);
  font-family: var(--t4-head);
  font-size: clamp(40px, 6.4vw, 96px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: .96;
  margin: 0;
  max-width: 15ch;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.t4km__index { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: clamp(24px, 2.4vw, 36px) 0 0; padding: 0; }
.t4km__index button {
  align-items: center;
  background: none;
  cursor: pointer;
  border: 1px solid var(--t4-hair);
  border-radius: 999px;
  color: inherit;
  display: inline-flex;
  font-family: var(--t4-mono);
  font-size: 11px;
  gap: 10px;
  letter-spacing: .08em;
  min-height: 40px;
  padding: 0 16px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--t4-dur) var(--t4-ease), border-color var(--t4-dur) var(--t4-ease), color var(--t4-dur) var(--t4-ease);
}
.t4km__index button span { color: var(--t4-blue); }
.t4km__index button:hover { background: #fff; border-color: rgba(36, 72, 216, .45); color: var(--t4-navy); }

.t4km__steps { --t4fx-steps-cols: minmax(0, 4fr) minmax(0, 6fr); --t4fx-step-h: 82vh; position: relative; }
.t4km-step { min-width: 0; position: relative; }
.t4km-step__cell { padding: clamp(28px, 3vw, 56px) clamp(20px, 2.6vw, 44px); }
/* cornici da scheda tecnica: linee ai lati della colonna e tra gli step, quadratini agli incroci */
.t4km__steps > .t4km-step { border-top: 1px solid var(--t4-hair); }
.t4km__steps > .t4km-step:last-of-type { border-bottom: 1px solid var(--t4-hair); }
.t4km__steps.is-stage > .t4km-step { border-left: 1px solid var(--t4-hair); border-right: 1px solid var(--t4-hair); }
.t4km-step::before, .t4km-step::after { background: var(--t4-ink); content: ""; height: 6px; position: absolute; top: -3.5px; width: 6px; z-index: 1; }
.t4km-step::before { left: -3.5px; }
.t4km-step::after { right: -3.5px; }
.t4km__steps.is-stack > .t4km-step::before, .t4km__steps.is-stack > .t4km-step::after { display: none; }

.t4km-step__k { align-items: center; display: flex; flex-wrap: wrap; font-family: var(--t4-mono); font-size: 12px; gap: 6px 14px; letter-spacing: .1em; margin: 0 0 clamp(16px, 1.6vw, 24px); text-transform: uppercase; }
.t4km-step__n { color: var(--t4-blue); font-variant-numeric: tabular-nums; }
.t4km .t4km-step__t { color: inherit; font-family: var(--t4-head); font-size: clamp(32px, 3.3vw, 56px); font-weight: 500; letter-spacing: -.03em; line-height: 1; margin: 0; text-transform: uppercase; }
.t4km-line { display: block; }
.t4km-step__spec { border-top: 1px solid var(--t4-hair); font-family: var(--t4-mono); font-size: 12px; letter-spacing: .06em; line-height: 1.5; margin: clamp(18px, 1.8vw, 28px) 0 0; padding-top: 14px; text-transform: uppercase; }
.t4km-step__claim { color: var(--t4-blue); font-family: var(--t4-head); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.4; margin: 14px 0 0; }
.t4km-step__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.t4km-step__chips li { background: #fff; border: 1px solid var(--t4-hair); border-radius: 999px; font-family: var(--t4-head); font-size: clamp(13px, .95vw, 15px); line-height: 1.2; padding: 8px 14px; }
.t4km-step__link {
  align-items: center;
  color: var(--t4-blue);
  display: inline-flex;
  font-family: var(--t4-mono);
  font-size: 12px;
  gap: 8px;
  letter-spacing: .08em;
  margin-top: clamp(16px, 1.8vw, 28px);
  min-height: 40px;
  text-decoration: none;
  text-transform: uppercase;
}
.t4km-step__link svg { height: 14px; transition: transform var(--t4-dur) var(--t4-ease); width: 14px; }
.t4km-step__link:hover { color: var(--t4-ink); text-decoration: underline; text-underline-offset: 4px; }
.t4km-step__link:hover svg { transform: translate(2px, -2px); }

/* da desktop lo step attivo è pieno, gli altri restano in secondo piano;
   con il movimento ridotto restano tutti pieni (si leggono senza seguire lo scroll) */
@media (prefers-reduced-motion: no-preference) {
  .t4km__steps.is-stage .t4km-step__cell { transition: opacity .5s var(--t4-ease); }
  .t4km__steps.is-stage .t4km-step:not([data-status="active"]) .t4km-step__cell { opacity: .26; }
}

/* pannello scuro: griglia da disegno tecnico, croci agli angoli, alone, parola */
.t4km-vis {
  aspect-ratio: 1 / 1;
  background: var(--t4-navy);
  border-radius: 6px;
  color: #fff;
  container-type: inline-size;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  position: relative;
}
.t4km-vis::before {
  background-image:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(36, 72, 216, .22) calc(50% - .5px), rgba(36, 72, 216, .22) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px), rgba(36, 72, 216, .22) calc(50% - .5px), rgba(36, 72, 216, .22) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(rgba(36, 72, 216, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 72, 216, .1) 1px, transparent 1px);
  background-position: center;
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}
.t4km-vis::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%2386a0ff' stroke-width='1'/%3E%3C/svg%3E") left 22px top 22px / 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%2386a0ff' stroke-width='1'/%3E%3C/svg%3E") right 22px top 22px / 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%2386a0ff' stroke-width='1'/%3E%3C/svg%3E") left 22px bottom 22px / 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%2386a0ff' stroke-width='1'/%3E%3C/svg%3E") right 22px bottom 22px / 12px no-repeat;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}
.t4km-vis__studio {
  background:
    radial-gradient(circle at 50% 50%, transparent calc(30cqw - 1px), rgba(36, 72, 216, .28) 30cqw, transparent calc(30cqw + 1px)),
    radial-gradient(ellipse 46% 40% at 50% 54%, rgba(36, 72, 216, .42), rgba(36, 72, 216, 0) 72%);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.t4km-vis__word {
  bottom: 5%;
  color: transparent;
  font-family: var(--t4-head);
  font-size: 15cqw;
  font-weight: 500;
  left: 50%;
  letter-spacing: -.045em;
  line-height: .8;
  position: absolute;
  text-transform: uppercase;
  transform: translateX(-50%);
  -webkit-text-stroke: 1px rgba(134, 160, 255, .22);
  white-space: nowrap;
}
.t4km-vis__count { color: var(--t4-sky); font-family: var(--t4-mono); font-size: 11px; left: 50%; letter-spacing: .1em; margin: 0; position: absolute; text-transform: uppercase; top: 20px; transform: translateX(-50%); white-space: nowrap; z-index: 2; }
.t4km-vis__count b { color: #fff; font-weight: 400; }
/* l'immagine riempie il riquadro e ci sta dentro intera (object-fit), qualunque sia il formato */
.t4km-vis__img { align-items: center; display: flex; inset: 16% 12% 18%; justify-content: center; position: absolute; }
.t4km-vis__img img { display: block; filter: drop-shadow(0 26px 28px rgba(0, 0, 0, .5)); height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; -webkit-user-drag: none; }
.t4km .t4km-vis__ph { height: 64%; min-height: 0; width: 70%; }

/* callout in vetro, agli angoli secondo quanti sono */
.t4km-vis__calls { list-style: none; margin: 0; padding: 0; }
.t4km-call {
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(134, 160, 255, .28);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 40%;
  min-width: 150px;
  padding: 12px 16px 14px;
  position: absolute;
  z-index: 2;
}
.t4km-call__l { color: var(--t4-sky); font-family: var(--t4-mono); font-size: 11px; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.t4km .t4km-call__v { color: #fff; font-family: var(--t4-head); font-size: clamp(16px, 1.35vw, 22px); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.t4km-call__rule { background: rgba(134, 160, 255, .35); display: block; height: 1px; margin-top: 4px; transform-origin: left; }
.t4km-call__bar { background: rgba(255, 255, 255, .12); border-radius: 2px; display: block; height: 4px; margin-top: 6px; overflow: hidden; }
.t4km-call__bar i { background: var(--t4-sky); border-radius: 2px; display: block; height: 100%; transform-origin: left; width: calc(var(--p, 0) * 100%); }
.t4km-vis__calls > .t4km-call:nth-child(1) { left: 6%; top: 11%; }
.t4km-vis__calls > .t4km-call:nth-child(2) { right: 6%; top: 11%; }
.t4km-vis__calls > .t4km-call:nth-child(3) { bottom: 8%; left: 6%; }
.t4km-vis__calls > .t4km-call:nth-child(4) { bottom: 8%; right: 6%; }
.t4km-vis__calls[data-n="1"] > .t4km-call:nth-child(1) { bottom: 8%; top: auto; }
.t4km-vis__calls[data-n="2"] > .t4km-call:nth-child(2) { bottom: 8%; top: auto; }

/* varianti cliccabili (richiesta del 22/10: gomme slick/rain, carburatore per
   categoria): bottoni in vetro come i callout, in basso nel pannello; una foto
   per variante, quella scelta (.is-on) in dissolvenza. I 2 callout stanno in alto. */
.t4km-vis__pic { align-items: center; display: flex; inset: 0; justify-content: center; opacity: 0; position: absolute; }
.t4km-vis__pic.is-on { opacity: 1; }
/* la foto intera, mai ingrandita oltre la sua misura; da desktop nella fascia
   libera tra i callout e i bottoni: le foto prodotto su fondo bianco (MP Kart
   Shop, 400 px) sotto i callout in vetro rendevano il testo illeggibile */
.t4km-vis__pic img { border-radius: 12px; height: auto; inset: auto; max-height: 100%; max-width: 100%; position: static; width: auto; }
.t4km-vis__vars { bottom: 8%; display: flex; gap: 12px; justify-content: space-between; left: 6%; position: absolute; right: 6%; z-index: 2; }
.t4km-var {
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(134, 160, 255, .28);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  font: inherit;
  gap: 6px;
  margin: 0;
  max-width: 40%;
  min-height: 44px;
  min-width: 150px;
  padding: 12px 16px 14px;
  position: relative;
  text-align: left;
  transition: background-color var(--t4-dur) var(--t4-ease), border-color var(--t4-dur) var(--t4-ease);
}
.t4km-var__l { color: var(--t4-sky); font-family: var(--t4-mono); font-size: 11px; letter-spacing: .08em; line-height: 1.3; padding-right: 26px; text-transform: uppercase; }
.t4km .t4km-var__v { color: #fff; font-family: var(--t4-head); font-size: clamp(16px, 1.35vw, 22px); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
/* pallino da selettore: vuoto, pieno sulla variante scelta */
.t4km-var__dot { border: 1.5px solid rgba(134, 160, 255, .7); border-radius: 50%; height: 14px; position: absolute; right: 16px; top: 13px; width: 14px; }
.t4km-var:hover { background: rgba(255, 255, 255, .13); border-color: rgba(134, 160, 255, .6); }
.t4km-var[aria-pressed="true"] { background: rgba(36, 72, 216, .55); border-color: var(--t4-sky); }
.t4km-var[aria-pressed="true"] .t4km-var__dot { background: var(--t4-sky); border-color: var(--t4-sky); box-shadow: inset 0 0 0 2.5px var(--t4-navy); }
.t4km .t4km-var:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: 3px; }
/* da desktop i pannelli non attivi (anche quelli trasparenti sopra) lasciano passare i clic */
.t4fx-steps__frame > .t4km-vis:not([data-status="active"]) { pointer-events: none; }
@media (min-width: 992px) {
  .t4km-vis--vars .t4km-vis__calls > .t4km-call:nth-child(n) { bottom: auto; top: 11%; }
  .t4km-vis--vars .t4km-vis__img { inset: calc(11% + 92px) 12% calc(8% + 84px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* a ogni attivazione (.is-run, rimessa da t4fx.steps) la timeline riparte */
  .t4km__steps.is-stage .t4km-step.is-run .t4fx-c { animation: t4km-char .6s var(--t4-ease-out) both; animation-delay: calc(var(--i, 0) * 14ms); }
  .t4km-vis.is-run .t4km-vis__img img { animation: t4km-img .9s var(--t4-ease-out) both; }
  .t4km-vis__pic { transform: scale(.96); transition: opacity .5s var(--t4-ease), transform .7s var(--t4-ease-out); }
  .t4km-vis__pic.is-on { transform: none; }
  .t4km-vis.is-run .t4km-var { animation: t4km-up .7s var(--t4-ease-out) both; animation-delay: calc(.2s + var(--k, 0) * .12s); }
  .t4km-vis.is-run .t4km-call { animation: t4km-up .7s var(--t4-ease-out) both; animation-delay: calc(.2s + var(--k, 0) * .12s); }
  .t4km-vis.is-run .t4km-call__bar i, .t4km-vis.is-run .t4km-call__rule { animation: t4km-fill 1s var(--t4-ease-out) both; animation-delay: calc(.4s + var(--k, 0) * .12s); }
}
@keyframes t4km-char { from { opacity: 0; transform: translateY(.45em); } }
@keyframes t4km-img { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes t4km-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes t4km-fill { from { transform: scaleX(0); } }

/* senza smoother da desktop (impilati): testo e pannello affiancati, niente pin */
@media (min-width: 992px) {
  .t4km__steps.is-stack > .t4km-step { align-items: center; column-gap: clamp(24px, 4vw, 72px); display: grid; grid-template-columns: var(--t4fx-steps-cols); padding: clamp(24px, 3vw, 48px) 0; }
}
/* da telefono: titolo, poi il pannello; i callout in griglia sotto lo scontorno */
@media (max-width: 991px) {
  .t4km-step__cell { padding: 32px 0 20px; }
  .t4km-vis { aspect-ratio: auto; display: flex; flex-direction: column; margin-bottom: 36px; padding: 52px 14px 46px; }
  .t4km-vis__img { height: min(68vw, 340px); inset: auto; position: relative; }
  .t4km-vis__word { bottom: auto; top: 30%; }
  .t4km-vis__calls { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
  .t4km-vis__calls[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .t4km-call { max-width: none; min-width: 0; position: relative; }
  .t4km-vis__calls > .t4km-call:nth-child(n) { inset: auto; }
  .t4km .t4km-call__v { font-size: 16px; overflow-wrap: anywhere; }
  /* varianti subito sotto la foto, affiancate a tutta larghezza; poi i callout */
  .t4km-vis__vars { gap: 8px; inset: auto; margin-top: 14px; position: relative; }
  .t4km-var { flex: 1 1 0; max-width: none; min-width: 0; padding: 12px 14px 14px; }
  .t4km-var__dot { right: 14px; }
  .t4km .t4km-var__v { font-size: 16px; overflow-wrap: break-word; }
}

/* --------------------------------------------------------------------------
   7 · Il T4 in numeri
   -------------------------------------------------------------------------- */
.t4kn { background: var(--t4-grad); color: #fff; overflow: hidden; padding: clamp(72px, 8vw, 140px) 0; }
.t4kn__wrap { display: grid; gap: 40px; margin: 0 auto; padding: 0 var(--t4k-gut); }
@media (min-width: 992px) {
  .t4kn__wrap { align-items: center; column-gap: clamp(32px, 4vw, 80px); grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}
.t4kn .t4kn__h { color: #fff; font-family: var(--t4-head); font-size: clamp(24px, 2.3vw, 38px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 32px; max-width: 22ch; text-transform: none; }
.t4kn__wheel { min-width: 0; }
/* richieste v4 (T5): niente più ruota che gira da sola (una riga ogni 3 s, ferma
   sotto il mouse: sembrava lenta o bloccata). Tutti i numeri sono leggibili
   insieme, a scheda tecnica con linee sottili; il movimento è uno solo e
   evidente: ogni cifra rulla (odometro) quando la sua riga entra in vista. */
.t4kn__list { border-top: 1px solid rgba(255, 255, 255, .22); display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) {
  .t4kn__list { column-gap: clamp(24px, 3vw, 56px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.t4kn-row { border-bottom: 1px solid rgba(255, 255, 255, .22); display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; min-width: 0; padding: clamp(18px, 1.8vw, 30px) 0; }
.t4kn-row__n { align-items: baseline; display: inline-flex; flex-wrap: wrap; font-family: var(--t4-head); font-size: clamp(44px, 4.6vw, 76px); font-variant-numeric: tabular-nums; font-weight: 500; gap: 4px 10px; letter-spacing: -.035em; line-height: 1.12; white-space: nowrap; }
.t4kn-row__u { color: var(--t4-sky); font-size: .34em; letter-spacing: 0; }
.t4kn-row__l { font-family: var(--t4-head); font-size: clamp(15px, 1.15vw, 19px); line-height: 1.3; max-width: 30ch; opacity: .88; }
.t4kn-nw { white-space: nowrap; }
@media (max-width: 991px) {
  .t4kn-row__n { font-size: 44px; }
  .t4kn-row__l { font-size: 15px; max-width: none; }
}

/* --------------------------------------------------------------------------
   8 · Manutenzione, costi, praticità
   -------------------------------------------------------------------------- */
.t4kc { background: var(--t4-page); color: var(--t4-navy); padding: clamp(72px, 8vw, 140px) 0 clamp(16px, 2vw, 32px); }
.t4kc__head { display: grid; gap: 20px 48px; margin-bottom: clamp(28px, 3vw, 56px); }
@media (min-width: 992px) { .t4kc__head { align-items: end; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.t4kc .t4kc__h { color: inherit; font-family: var(--t4-head); font-size: var(--t4-h2); font-weight: 500; letter-spacing: var(--t4-h2-track); line-height: 1; margin: 0; text-transform: uppercase; }
.t4kc__lead { font-family: var(--t4-head); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.5; margin: 0; max-width: 46ch; opacity: .75; }
.t4kc__cost { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 16px 0 0; }
.t4kc__cost strong { color: var(--t4-blue); font-family: var(--t4-mono); font-size: 15px; font-weight: 400; }
.t4kc__cost span { font-family: var(--t4-mono); font-size: 11px; letter-spacing: .06em; opacity: .7; text-transform: uppercase; }
.t4kc__more, .t4kc-shop {
  align-items: center;
  color: var(--t4-blue);
  display: inline-flex;
  font-family: var(--t4-mono);
  font-size: 12px;
  gap: 8px;
  letter-spacing: .08em;
  min-height: 40px;
  text-decoration: none;
  text-transform: uppercase;
}
.t4kc__more { margin-top: 8px; }
.t4kc__more svg, .t4kc-shop svg { height: 14px; width: 14px; }
.t4kc__more:hover, .t4kc-shop:hover { color: var(--t4-ink); text-decoration: underline; text-underline-offset: 4px; }

.t4kc__panel {
  background:
    radial-gradient(ellipse 55% 70% at 68% 50%, #fff, rgba(255, 255, 255, 0) 72%),
    linear-gradient(160deg, #dfe2ea, #f1f2f6);
  border-radius: clamp(20px, 2vw, 32px);
  display: grid;
  overflow: hidden;
  position: relative;
}
@media (min-width: 992px) { .t4kc__panel { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); min-height: clamp(480px, 42vw, 660px); } }
.t4kc__list { align-items: flex-start; align-self: center; display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 3vw, 48px); position: relative; z-index: 2; }
.t4kc-item { border-radius: 24px; max-width: 100%; }
.t4kc .t4kc-item__h { font-size: inherit; font-weight: inherit; letter-spacing: 0; line-height: inherit; margin: 0; text-transform: none; }
.t4kc-pill {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(14, 20, 48, .06);
  color: var(--t4-navy);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--t4-head);
  font-size: clamp(15px, 1.1vw, 18px);
  gap: 14px;
  justify-content: space-between;
  line-height: 1.2;
  max-width: 100%;
  min-height: 48px;
  padding: 6px 8px 6px 20px;
  text-align: left;
}
.t4kc-pill:hover { box-shadow: 0 10px 24px rgba(14, 20, 48, .1); }
.t4kc-pill__ic { border: 1.5px solid currentColor; border-radius: 50%; flex: 0 0 auto; height: 28px; position: relative; width: 28px; }
.t4kc-pill__ic::before, .t4kc-pill__ic::after { background: currentColor; content: ""; height: 1.5px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 11px; }
.t4kc-pill__ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.t4kc-item.is-open { background: #fff; box-shadow: 0 24px 50px rgba(14, 20, 48, .08); padding: 8px 22px 22px; width: 100%; }
.t4kc-item.is-open .t4kc-pill { box-shadow: none; font-size: clamp(17px, 1.3vw, 21px); padding: 10px 0 0; width: 100%; }
.t4kc-item.is-open .t4kc-pill__ic::after { transform: translate(-50%, -50%) rotate(0deg); }
.t4kc-item__text { font-family: var(--t4-head); font-size: clamp(14px, 1vw, 16px); line-height: 1.55; margin: 12px 0 0; opacity: .8; }
.t4kc-price { align-items: baseline; border-top: 1px solid var(--t4-hair); display: flex; font-family: var(--t4-head); font-size: 14px; gap: 12px; justify-content: space-between; margin: 16px 0 0; padding-top: 12px; }
.t4kc-price strong { color: var(--t4-blue); font-family: var(--t4-mono); font-size: 15px; font-weight: 400; white-space: nowrap; }
.t4kc-note { font-family: var(--t4-mono); font-size: 10.5px; letter-spacing: .06em; margin: 6px 0 0; opacity: .6; text-transform: uppercase; }
/* immagine di catalogo MP del servizio: piccola, accanto al nome */
.t4kc-price__thumb { background: #f2f2f2; border-radius: 10px; display: block; flex: 0 0 auto; height: 44px; overflow: hidden; width: 44px; }
.t4kc-price__thumb[hidden] { display: none; }
.t4kc-price__thumb img { display: block; height: 100%; mix-blend-mode: multiply; object-fit: contain; width: 100%; }
.t4kc-price__thumb + span { margin-right: auto; }
.t4kc-price:has(> .t4kc-price__thumb:not([hidden])) { align-items: center; }
.t4kc-item__go { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .t4kc-pill, .t4kc-item { transition: box-shadow var(--t4-dur) var(--t4-ease), background-color var(--t4-dur) var(--t4-ease); }
  .t4kc-pill__ic::after { transition: transform var(--t4-dur) var(--t4-ease); }
  .t4kc-item.is-open .t4kc-item__body { animation: t4kc-in .45s var(--t4-ease-out) both; }
}
@keyframes t4kc-in { from { opacity: 0; transform: translateY(8px); } }

.t4kc__stage { min-height: 320px; position: relative; }
.t4kc-vis { display: grid; inset: 0; opacity: 0; padding: clamp(20px, 4vw, 64px); place-items: center; position: absolute; visibility: hidden; }
.t4kc-vis.is-on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .t4kc-vis { transition: opacity .5s var(--t4-ease), visibility 0s linear .5s; }
  .t4kc-vis.is-on { transition: opacity .5s var(--t4-ease), visibility 0s; }
}
.t4kc-vis__img { aspect-ratio: 1 / 1; width: min(100%, 460px); }
.t4kc-vis__img img { display: block; height: 100%; object-fit: contain; width: 100%; }
/* foto di catalogo su fondo bianco: col pannello chiaro il bianco sparisce */
.t4kc-vis__img--shop img { mix-blend-mode: multiply; }
/* foto vera del T4 per le pillole dei servizi */
.t4kc-vis__img--photo { aspect-ratio: 3 / 2; border-radius: clamp(16px, 1.6vw, 24px); box-shadow: 0 30px 60px rgba(14, 20, 48, .18); overflow: hidden; width: min(100%, 620px); }
.t4kc-vis__img--photo img { object-fit: cover; }
.t4kc .t4kc-vis__ph { height: 60%; min-height: 0; width: 70%; }
.t4kc-sheet { background: #fff; border-radius: 20px; box-shadow: 0 30px 60px rgba(14, 20, 48, .1); padding: clamp(18px, 2vw, 32px); width: min(100%, 520px); }
.t4kc-sheet__k { color: var(--t4-blue); font-family: var(--t4-mono); font-size: 11px; letter-spacing: .08em; line-height: 1.4; margin: 0 0 8px; text-transform: uppercase; }
.t4kc-sheet__rows { list-style: none; margin: 0; padding: 0; }
.t4kc-sheet__rows li { align-items: baseline; border-top: 1px solid var(--t4-hair); display: flex; gap: 16px; justify-content: space-between; padding: 12px 0; }
.t4kc-sheet__rows span { font-family: var(--t4-head); font-size: clamp(14px, 1vw, 16px); line-height: 1.3; }
.t4kc-sheet__rows small { display: block; font-family: var(--t4-mono); font-size: 10px; letter-spacing: .06em; margin-top: 3px; opacity: .55; text-transform: uppercase; }
.t4kc-sheet__rows b { font-family: var(--t4-mono); font-size: 12px; font-weight: 400; text-align: right; }
.t4kc-sheet__note { font-family: var(--t4-mono); font-size: 10.5px; letter-spacing: .06em; margin: 8px 0 0; opacity: .6; text-transform: uppercase; }
/* da telefono: visual in alto, poi la card aperta, poi le altre pillole a tutta larghezza */
@media (max-width: 991px) {
  .t4kc__stage { min-height: 0; order: -1; }
  .t4kc-vis { padding: 20px 16px 0; position: relative; }
  .t4kc-vis:not(.is-on) { display: none; }
  .t4kc-vis__img { width: min(100%, 300px); }
  .t4kc-vis__img--photo { width: 100%; }
  .t4kc-item, .t4kc-pill { width: 100%; }
  .t4kc-item.is-open { order: -1; padding: 6px 16px 18px; }
  .t4kc-item__go .t4-pill { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   6b · Video manutenzione (richieste v4, 19/10)
   -------------------------------------------------------------------------- */
/* posto tenuto finché arrivano i dati (misurato: 434px a 995, 627 a 1440, 807 a 1920, 531 a 390) */
[data-t4-kvideo]:empty { background: var(--t4-navy); min-height: 520px; }
@media (min-width: 992px) { [data-t4-kvideo]:empty { min-height: clamp(420px, 42vw, 800px); } }
[data-t4-kvideo][data-off] { min-height: 0 !important; }
.t4kv { background: var(--t4-navy); border-top: 1px solid var(--t4-hair-dark); color: #fff; padding: clamp(64px, 7vw, 120px) 0; }
.t4kv__wrap { display: grid; gap: clamp(24px, 3vw, 56px); margin: 0 auto; padding: 0 var(--t4k-gut); }
@media (min-width: 992px) { .t4kv__wrap { align-items: start; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.t4kv__k { color: var(--t4-sky); font-family: var(--t4-mono); font-size: 12px; letter-spacing: .12em; line-height: 1.3; margin: 0 0 16px; text-transform: uppercase; }
.t4kv__h { color: #fff; font-family: var(--t4-head); font-size: clamp(28px, 2.6vw, 44px); font-weight: 500; letter-spacing: -.025em; line-height: 1.02; margin: 0; overflow-wrap: anywhere; text-transform: uppercase; }
.t4kv__lead { font-family: var(--t4-mono); font-size: clamp(13px, 12px + .2vw, 15px); line-height: 1.6; margin: 18px 0 0; max-width: 48ch; opacity: .8; }
.t4kv__links { margin: 22px 0 0; }
.t4kv__more { align-items: center; color: #fff; display: inline-flex; font-family: var(--t4-mono); font-size: 12px; gap: 6px; letter-spacing: .1em; min-height: 40px; text-decoration: underline; text-transform: uppercase; text-underline-offset: 4px; }
.t4kv__more:hover, .t4kv__more:focus { color: var(--t4-sky); }
.t4kv__more:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: 3px; }
.t4kv__more svg { height: 14px; width: 14px; }
.t4kv__player { aspect-ratio: 16 / 9; background: #000; border-radius: clamp(16px, 1.6vw, 24px); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); overflow: hidden; position: relative; }
.t4kv__player iframe, .t4kv__player video { border: 0; display: block; height: 100%; width: 100%; }
.t4kv__poster { background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(36, 72, 216, .35), rgba(14, 20, 48, 0) 70%), #141b3d; border: 0; color: #fff; cursor: pointer; display: block; height: 100%; margin: 0; padding: 0; position: relative; width: 100%; }
.t4kv__poster img { display: block; height: 100%; object-fit: cover; width: 100%; }
.t4kv__poster::after { background: linear-gradient(180deg, rgba(14, 20, 48, 0) 50%, rgba(14, 20, 48, .7) 100%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.t4kv__poster:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: -4px; }
.t4kv__play { align-items: center; background: #fff; border-radius: 50%; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); color: var(--t4-navy); display: grid; height: clamp(56px, 6vw, 80px); justify-items: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: transform var(--t4-dur) var(--t4-ease), background-color var(--t4-dur) var(--t4-ease); width: clamp(56px, 6vw, 80px); z-index: 1; }
.t4kv__play svg { height: 38%; margin-left: 6%; width: 38%; }
.t4kv__poster:hover .t4kv__play { background: var(--t4-sky); transform: translate(-50%, -50%) scale(1.06); }
.t4kv__label { bottom: 18px; font-family: var(--t4-mono); font-size: 11px; left: 20px; letter-spacing: .12em; position: absolute; text-transform: uppercase; z-index: 1; }
.t4kv__eps { display: grid; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.t4kv__ep { align-items: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(134, 160, 255, .28); border-radius: 14px; color: #fff; cursor: pointer; display: grid; font: inherit; gap: 12px; grid-template-columns: 28px minmax(0, 1fr) 16px; min-height: 48px; padding: 10px 14px; text-align: left; width: 100%; }
.t4kv__ep:hover { border-color: rgba(134, 160, 255, .65); }
.t4kv__ep[aria-pressed="true"] { background: rgba(36, 72, 216, .24); border-color: var(--t4-sky); }
.t4kv__ep:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: 2px; }
.t4kv__ep-n { color: var(--t4-sky); font-family: var(--t4-mono); font-size: 11px; letter-spacing: .12em; }
.t4kv__ep-t { font-family: var(--t4-head); font-size: 15px; font-weight: 500; line-height: 1.25; }
.t4kv__ep svg { height: 14px; opacity: .7; width: 14px; }
@media (prefers-reduced-motion: reduce) { .t4kv__play { transition: none; } }

/* --------------------------------------------------------------------------
   10 · Fine pagina (t4-next.js), versione scura del Kart
   -------------------------------------------------------------------------- */
.t4s .t4nx.t4nx--dark { background: var(--t4-navy); color: #fff; }
.t4s .t4nx--dark .subtitle, .t4s .t4nx--dark .title, .t4s .t4nx--dark .article-content { color: #fff; }
.t4s .t4nx--dark .article-content { opacity: .8; }
.t4s .t4nx--dark .lines > div { background: rgba(255, 255, 255, .06); }
.t4s .t4nx--dark .t4nx-card--light { border-color: transparent; }
.t4s .t4nx--dark .t4nx-card--blue { box-shadow: inset 0 0 0 1px rgba(134, 160, 255, .22); }