/* QuanticData — pagine /collectors/<slug>/ (+ de/es/fr) nel design chiaro "fresh" (03/10/2026).
   Attivo solo con <html class="qd-light qd-fresh qd-col">, dopo product-light.css e product-fresh.css
   (che non si toccano). Solo aspetto: nessun testo cambia, nessun testo sparisce (su telefono le righe
   lunghe delle tabelle si chiudono in un <details>, e restano nel DOM). */

html.qd-col{--col-ink:#0E1220;--col-body:#3A4256;--col-muted:#5A6377;--col-line:rgba(14,18,32,.09);--col-violet:#4B3FD6}

/* ── HERO a strati: scena del kit dietro, terminale appoggiato sopra ── */
html.qd-col .hero-card .visual{position:relative;display:block!important}
html.qd-col .col-hero-art{display:block;position:relative;z-index:0}
html.qd-col .col-hero-art img{display:block;width:100%;height:auto;border-radius:24px;
  box-shadow:0 1px 2px rgba(14,18,32,.06),0 34px 70px -34px rgba(47,43,156,.5)}
html.qd-col .hero-card .visual .term{position:relative;z-index:1;margin:-70px 0 0 44px;
  box-shadow:0 1px 2px rgba(14,18,32,.08),0 30px 60px -26px rgba(14,18,32,.55)}
html.qd-col .hero-card .term-body{overflow-x:auto;max-width:100%;min-height:0;font-size:12.5px;line-height:1.6}
html.qd-col .hero-card .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:start}
html.qd-col .hero-card .hero-grid > *,html.qd-col .hero-card .visual > *{min-width:0}
html.qd-col .hero-card .hero-copy{padding-top:28px}
/* pagine de/es/fr: hero senza colonna destra, la scena si affianca al testo */
html.qd-col .hero-card:has(> .col-hero-side){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px 48px;align-items:center}
html.qd-col .hero-card:has(> .col-hero-side) > .crumbs{grid-column:1/-1}
html.qd-col .col-hero-side{min-width:0}
@media (max-width:980px){
  html.qd-col .hero-card:has(> .col-hero-side){grid-template-columns:minmax(0,1fr)}
  html.qd-col .hero-card .hero-grid{grid-template-columns:minmax(0,1fr)}
  html.qd-col .hero-card .hero-copy{padding-top:0}
  html.qd-col .hero-card .visual{max-width:600px}
}

/* ── tessera "Input is meaning" nella sezione split ── */
html.qd-col .split .ltile{background:linear-gradient(180deg,#FFFFFF,#F7F6FF);border:1px solid rgba(85,70,232,.14);border-radius:20px;
  box-shadow:0 1px 2px rgba(14,18,32,.04),0 14px 38px -22px rgba(14,18,32,.16);color:var(--col-ink)}
html.qd-col .ltile .lt-big{color:var(--col-ink)}
html.qd-col .ltile .lt-chips i{background:#fff;border:1px solid var(--col-line);color:var(--col-body)}

/* ── limiti ── */
html.qd-col .qd-limit{background:#fff;border:1px solid var(--col-line);border-radius:16px;box-shadow:0 1px 2px rgba(14,18,32,.04),0 14px 38px -26px rgba(14,18,32,.16)}
html.qd-col .qd-limit .k{color:var(--col-muted)}
html.qd-col .qd-limit .v{color:var(--col-ink);font-family:var(--font-head)}
html.qd-col .qd-limit .v small{color:var(--col-muted)}

/* ── tabelle: nomi di campo in minuscolo come nell'API, leggibili ── */
html.qd-col .cmp-table tbody th{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;color:var(--col-ink);white-space:normal}
html.qd-col .cmp-table tbody th code{font-size:13.5px;text-transform:none;letter-spacing:0;color:#3B2FCF;background:#F1EFFF;border:0;padding:2px 7px;border-radius:6px}
html.qd-col .cmp-table td{color:var(--col-body);font-size:15px}
html.qd-col .cmp-table td.cmp-us{color:var(--col-ink)}
html.qd-col .cmp-scroll{background:#fff;border:1px solid var(--col-line);border-radius:20px;box-shadow:0 1px 2px rgba(14,18,32,.04),0 14px 38px -22px rgba(14,18,32,.16)}
html.qd-col .compare table{border:0;box-shadow:none}
html.qd-col .col-fold{display:none}

/* ── la demo: modulo chiaro, risposta in un'isola scura come il terminale ── */
html.qd-col .qd-runner{background:#fff;border:1px solid var(--col-line);border-radius:20px;box-shadow:0 1px 2px rgba(14,18,32,.04),0 24px 60px -32px rgba(47,43,156,.35)}
html.qd-col .qd-runner .qd-head{background:#F7F6FF;border-bottom:1px solid var(--col-line)}
html.qd-col .qd-runner .qd-path{color:var(--col-muted)}
html.qd-col .qd-runner label{color:var(--col-muted)}
html.qd-col .qd-runner input,html.qd-col .qd-runner select{background:#fff;border:1px solid rgba(14,18,32,.2);color:var(--col-ink);min-height:44px}
html.qd-col .qd-runner .qd-hint{color:var(--col-muted)}
html.qd-col .qd-run{min-height:44px}
html.qd-col .qd-cta{background:#fff;border:1px solid var(--col-line);border-radius:18px;box-shadow:0 1px 2px rgba(14,18,32,.04),0 14px 38px -26px rgba(14,18,32,.16)}
html.qd-col .qd-cta-h{color:var(--col-ink)}
html.qd-col .qd-cta-p{color:var(--col-muted)}

/* ── prezzi: il link di un piano che il parser riapre dentro la nota sotto i piani (markup di prod con un </a>
   mancante) torna testo normale della nota, senza riquadro ── */
html.qd-col .pricing .cmp-note > a.tier,html.qd-col .pricing > a.tier:not(.tiers a){display:inline;padding:0;margin:0;background:none;border:0;box-shadow:none;border-radius:0;color:inherit;font:inherit;transform:none;min-height:0}
html.qd-col .pricing .cmp-note{font-size:14px;color:var(--col-muted);max-width:820px}

/* ── casi d'uso, fonti, codice ── */
html.qd-col .uc h3{color:var(--col-ink)}
html.qd-col .uc p{color:var(--col-body)}
html.qd-col .code-card .code-tabs .tab{min-height:36px}
html.qd-col .prose-narrow p{font-size:17px;line-height:1.7}

/* isole scure: testi chiari (product-fresh colora ogni "main p" col grigio del corpo) */
html.qd-col .hero-card .term-bar span{color:#AEB8CC;white-space:normal;overflow-wrap:anywhere}
html.qd-col .qd-runner .qd-idle{background:#070B18}
html.qd-col .qd-runner .qd-idle .qd-idle-line{color:#C8D3F0}
html.qd-col .qd-runner .qd-idle .qd-idle-sub{color:#9AA5BC}
html.qd-col .units > .unit{min-width:0;overflow-wrap:anywhere}

/* ── TELEFONO: una colonna, testo a due misure, tap da 44px, tabelle a righe impilate ── */
@media (max-width:640px){
  html.qd-col .hero-card .visual .term{margin:-30px 0 0 10px}
  html.qd-col .col-hero-art img{border-radius:18px}
  html.qd-col .hero-card .cta-row{display:grid;grid-template-columns:1fr;gap:10px}
  html.qd-col .hero-card .cta-row a{min-height:48px;display:flex;align-items:center;justify-content:center}
  html.qd-col .related a{min-height:44px;display:inline-flex;align-items:center;padding:0 14px}
  html.qd-col .faq-list summary{min-height:44px}
  html.qd-col .hero-card .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  html.qd-col .faq-side a{display:inline-flex;align-items:center;min-height:44px}
  html.qd-col main .foot-col a{display:flex;align-items:center;min-height:44px}
  html.qd-col main .foot-base a{display:inline-flex;align-items:center;min-height:44px}
  html.qd-col .units{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html.qd-col .code-card .code-tabs .tab,html.qd-col .code-card .copy,html.qd-col .code-card button{min-height:44px}
  html.qd-col .qd-tab,html.qd-col .qd-copy{min-height:44px}
  html.qd-col .tool-figure img{border-radius:16px}
  html.qd-col .qd-limits{grid-template-columns:1fr 1fr}

  /* tabelle -> righe impilate */
  html.qd-col .cmp-scroll{overflow:visible;padding:4px 0}
  html.qd-col .cmp-table{min-width:0;display:block}
  html.qd-col .cmp-table :is(thead,tbody){display:block}
  html.qd-col .cmp-table tr{display:grid;gap:4px 12px;padding:14px 16px;border-top:1px solid var(--col-line)}
  html.qd-col .cmp-table thead tr{border-top:0;background:#F7F6FF;border-radius:20px 20px 0 0}
  html.qd-col .cmp-table :is(th,td){display:block;padding:0;border:0;background:none;font-size:15px;line-height:1.45}
  html.qd-col .cmp-table thead th{font-size:13px;color:var(--col-muted);font-family:inherit;font-weight:600;padding:0}
  html.qd-col .cmp-table tbody tr:hover :is(td,th){background:none}
  html.qd-col .cmp-table .cmp-us{border:0;background:none}
  /* campi: nome | tipo, poi descrizione */
  html.qd-col #output .cmp-table tr{grid-template-columns:minmax(0,1fr) auto}
  html.qd-col #output .cmp-table tr > :nth-child(2){font-size:13px;color:var(--col-muted);text-align:right}
  html.qd-col #output .cmp-table tr > :nth-child(3){grid-column:1/-1}
  /* input: nome | tipo | obbligatorio, poi descrizione */
  html.qd-col #input .cmp-table tr{grid-template-columns:minmax(0,1fr) auto auto}
  html.qd-col #input .cmp-table tr > :is(:nth-child(2),:nth-child(3)){font-size:13px;color:var(--col-muted)}
  html.qd-col #input .cmp-table tr > :nth-child(4){grid-column:1/-1}
  /* righe oltre la quinta: chiuse finche' non si apre il +N */
  html.qd-col :is(#output,#input) .cmp-scroll:has(+ .col-fold) tbody tr:nth-child(n+6){display:none}
  html.qd-col :is(#output,#input) .cmp-scroll:has(+ .col-fold[open]) tbody tr:nth-child(n+6){display:grid}
  html.qd-col .col-fold{display:block;max-width:1060px;margin:10px auto 0}
  html.qd-col .col-fold summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
    border:1px solid var(--col-line);border-radius:12px;background:#fff;color:var(--col-violet);font-weight:600;font-size:15px;cursor:pointer}
  html.qd-col .col-fold summary::-webkit-details-marker{display:none}
  html.qd-col .col-fold summary::before{content:attr(data-more)}
  html.qd-col .col-fold summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  html.qd-col .col-fold[open] summary::before{content:"−"}
  html.qd-col .col-fold[open] summary::after{transform:translateY(2px) rotate(225deg)}
  /* confronti: legenda a pallini, ogni cella col pallino della sua colonna */
  html.qd-col #compare .cmp-table tr{grid-template-columns:minmax(0,1fr)}
  html.qd-col #compare .cmp-table thead tr{display:flex;flex-wrap:wrap;gap:6px 14px}
  html.qd-col #compare .cmp-table thead th:empty{display:none}
  html.qd-col #compare .cmp-table tbody th{font-size:15px;color:var(--col-ink)}
  html.qd-col #compare .cmp-table :is(thead th,td){position:relative;padding-left:16px}
  html.qd-col #compare .cmp-table :is(thead th,td)::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:#8A93A8}
  html.qd-col #compare .cmp-table thead th:empty::before{display:none}
  html.qd-col #compare .cmp-table tr > :nth-child(3)::before{background:#D9822B}
  html.qd-col #compare .cmp-table tr > :nth-child(4)::before{background:#2E63E0}
  html.qd-col #compare .cmp-table tr > :nth-child(5)::before{background:#0B8F6E}
  html.qd-col #compare .cmp-table tr > .cmp-us::before{background:#5546E8}
  /* la tabella fr a 5 colonne ha un'intestazione anche sulla prima colonna */
  html.qd-col #compare .cmp-table thead th:first-child:not(:empty){padding-left:0}
  html.qd-col #compare .cmp-table thead th:first-child:not(:empty)::before,html.qd-col #compare .cmp-table tbody th::before{display:none}
  html.qd-col #compare .cmp-table tbody th{padding-left:0}
}

/* titoli lunghi delle pagine de/es/fr: una misura piu' piccola, stesso testo */
html.qd-col .hero-card:has(> .col-hero-side) h1{font-size:clamp(32px,3.4vw,46px);line-height:1.08}