/* /ipv6-proxies/for/<target>/ e /ipv6-proxies/use-cases/ — ridisegno chiaro "fresh" del 03/10/2026.
   SOLO aspetto: nessun testo, titolo, link, numero, FAQ o JSON-LD cambia (prova in reports/qd-dc-ipv6/diff-proof.md).
   Attivo solo con <html class="qd-light qd-fresh qd-v6u">, dopo product-light.css + product-fresh.css.
   (Le pagine paese IPv6 e l'hub IPv6 caricano anche /datacenter-proxies/dc.css: qui niente per loro.)
   Un solo teal per schermata = la CTA; isole scure solo codice e banda finale. Telefono semplice. */

html.qd-v6u{--c-ink:#0E1220;--c-body:#3A4256;--c-muted:#5A6377;--c-line:rgba(14,18,32,.09);--c-line2:rgba(14,18,32,.15);
  --c-violet:#4B3FD6;--c-violet-ink:#3B2FCF;--c-violet-soft:#F1EFFF;
  --c-shadow:0 1px 2px rgba(14,18,32,.04),0 16px 40px -24px rgba(14,18,32,.18);
  --c-shadow-hi:0 1px 2px rgba(14,18,32,.05),0 28px 60px -30px rgba(47,43,156,.4)}
html.qd-v6u body{--text:var(--c-ink);--muted:var(--c-muted);--line:var(--c-line);--bg-elev:#FFFFFF}
html.qd-v6u body main :is(h1,h2,h3,b,strong){color:var(--c-ink)}
html.qd-v6u body main :is(p,li,td){color:var(--c-body)}
html.qd-v6u body main :is(.sub,.cmp-note,.uc-brands,.trust,.tool-byline){color:var(--c-muted)}
html.qd-v6u body main :is(.sub,.cmp-note) strong{color:var(--c-ink)}
html.qd-v6u body main :is(.copy,.sub,.cmp-note,.uc-fig figcaption) a{color:var(--c-violet-ink)}
html.qd-v6u body main :not(pre)>code{color:var(--c-violet-ink);background:var(--c-violet-soft);border:0;border-radius:6px;padding:1px 6px}

/* ── hero a strati: pannello bianco, scheda del target a destra, scena sotto appoggiata al bordo ── */
html.qd-v6u .uc-hero.hero-outer{max-width:1240px;padding:22px 20px 0}
html.qd-v6u .uc-hero .hero-card.pp-hero{position:relative;isolation:isolate;overflow:visible;border-radius:36px;padding:30px 52px 0;
  background:radial-gradient(60% 80% at 100% 0%,rgba(217,211,255,.6),transparent 62%),radial-gradient(50% 70% at 0% 100%,rgba(191,239,230,.42),transparent 65%),linear-gradient(180deg,#FFFFFF,#FAFAFE);
  border:1px solid var(--c-line);box-shadow:0 1px 2px rgba(14,18,32,.04),0 40px 90px -60px rgba(47,43,156,.4)}
html.qd-v6u .uc-hero .crumbs{margin-bottom:20px;font-size:14px}
html.qd-v6u .uc-hero .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}
html.qd-v6u .uc-hero h1{font-size:clamp(38px,4.3vw,56px);line-height:1.05;letter-spacing:-.034em;margin:0 0 18px}
html.qd-v6u .uc-hero .lead{font-size:17.5px;line-height:1.66;color:var(--c-body)}
html.qd-v6u .uc-hero .tool-byline{font-size:13.5px}
html.qd-v6u .uc-hero .trust{font-size:13.5px}
html.qd-v6u .uc-hero .btn-cta{box-shadow:0 10px 24px -12px rgba(19,133,108,.55)}
html.qd-v6u .uc-card{background:#FFFFFF;border:1px solid var(--c-line);border-radius:24px;box-shadow:var(--c-shadow-hi);padding:24px}
html.qd-v6u .uc-card .uc-word{background:var(--c-violet-soft);border-color:rgba(75,63,214,.18);color:var(--c-ink)}
html.qd-v6u .uc-card .uc-sub{color:var(--c-muted)}
html.qd-v6u .uc-rows li{border-top-color:var(--c-line)}
html.qd-v6u .uc-rows li span{color:var(--c-muted)}
html.qd-v6u .uc-rows li b{color:var(--c-ink)}
html.qd-v6u .uc-rows li b a{color:var(--c-violet-ink)}
/* la scena esce dal pannello: carta dietro + ombra */
html.qd-v6u .uc-hero .uc-hero-art{position:relative;margin:36px 0 -64px;isolation:isolate}
html.qd-v6u .uc-hero .uc-hero-art::before{content:"";position:absolute;z-index:-1;inset:18px -14px -14px 18px;border-radius:28px;
  background:linear-gradient(150deg,rgba(109,92,255,.18),rgba(37,227,194,.14));border:1px solid rgba(85,70,232,.16)}
html.qd-v6u .uc-hero .uc-hero-art picture{display:block}
html.qd-v6u .uc-hero .uc-hero-art img{border:0;border-radius:24px;background:#5546E8;box-shadow:0 1px 2px rgba(14,18,32,.06),0 36px 80px -36px rgba(47,43,156,.55)}
html.qd-v6u body main>.section.facts-wrap{padding-top:104px}

/* numeri */
html.qd-v6u main .facts{gap:14px;border:0;background:transparent}
html.qd-v6u main .facts>.fact{background:#FFFFFF;border:1px solid var(--c-line);border-radius:20px;box-shadow:var(--c-shadow);padding:20px 20px 18px}
html.qd-v6u main .facts>.fact strong{font-family:var(--font-head);font-size:19px;color:var(--c-ink)}
html.qd-v6u main .facts>.fact span{font-size:14px;color:var(--c-muted)}

/* testo: titolo a sinistra, colonna leggibile */
html.qd-v6u main .split .copy{max-width:860px}
html.qd-v6u main .split .copy p{font-size:17px;line-height:1.72}
html.qd-v6u main .split h2,html.qd-v6u main .section>h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.026em;line-height:1.14}
html.qd-v6u .uc-fig img{border:0;border-radius:22px;background:#5546E8;box-shadow:var(--c-shadow-hi)}
html.qd-v6u .uc-fig figcaption{color:var(--c-muted);font-size:14px}
html.qd-v6u .uc-fig figcaption strong{color:var(--c-ink)}
/* tabella "cosa far girare": card bianca */
html.qd-v6u .uc-fit-wrap{background:#FFFFFF;border:1px solid var(--c-line);border-radius:20px;box-shadow:var(--c-shadow);padding:6px 18px}
html.qd-v6u table.uc-fit :is(th,td){border-color:var(--c-line)}
html.qd-v6u table.uc-fit th{color:var(--c-muted)}
html.qd-v6u table.uc-fit td:first-child{color:var(--c-ink);font-weight:600}
html.qd-v6u .uc-yes{color:#0B6B55}
html.qd-v6u .uc-partly{color:#8A4B00}
html.qd-v6u .uc-no{color:#9B2C2C}
/* codice: isola scura */
html.qd-v6u main .code-card{border:0;border-radius:20px;box-shadow:0 30px 60px -36px rgba(14,18,32,.6)}
/* paesi e collegati: card con freccia */
html.qd-v6u main .usecases .uc-grid{gap:14px}
html.qd-v6u main .usecases .uc{position:relative;background:#FFFFFF;border:1px solid var(--c-line);border-radius:20px;box-shadow:var(--c-shadow);padding:20px 40px 18px 20px;text-decoration:none;transition:transform .25s ease,border-color .2s ease}
html.qd-v6u main .usecases a.uc::after{content:"";position:absolute;right:18px;top:24px;width:8px;height:8px;border-top:2px solid var(--c-violet);border-right:2px solid var(--c-violet);transform:rotate(45deg)}
html.qd-v6u main .usecases a.uc:hover{transform:translateY(-2px);border-color:rgba(75,63,214,.4)}
html.qd-v6u main .usecases .uc h3{color:var(--c-ink);font-size:17px}
html.qd-v6u main .usecases .uc p{color:var(--c-body);font-size:14.5px}
/* prezzi: cinque card */
html.qd-v6u .uc-tiers{gap:12px}
html.qd-v6u .uc-tiers a{background:#FFFFFF;border:1px solid var(--c-line);border-radius:18px;box-shadow:var(--c-shadow);padding:18px;transition:transform .25s ease,border-color .2s ease}
html.qd-v6u .uc-tiers a:first-child{border:1.5px solid rgba(75,63,214,.5);background:linear-gradient(180deg,#F7F6FF,#FFFFFF 70%)}
html.qd-v6u .uc-tiers a:hover{transform:translateY(-3px);border-color:rgba(75,63,214,.45)}
html.qd-v6u .uc-tiers a b{color:var(--c-ink)}
html.qd-v6u .uc-tiers a span{color:var(--c-muted);font-size:14px}
html.qd-v6u .uc-steps li::before{background:var(--c-violet-soft);border-color:rgba(75,63,214,.25);color:var(--c-violet-ink)}
/* FAQ */
html.qd-v6u main .faq details{background:#FFFFFF}
html.qd-v6u main .faq-side p{color:var(--c-body)}
/* banda finale scura (isola voluta) */
html.qd-v6u main .final-band{border:0;border-radius:28px;background:radial-gradient(60% 120% at 100% 0%,rgba(109,92,255,.4),transparent 60%),radial-gradient(50% 100% at 0% 100%,rgba(37,227,194,.18),transparent 60%),#0E1220}
html.qd-v6u main .final-band :is(h2,h3,b,strong){color:#FFFFFF}
html.qd-v6u main .final-band p{color:#C8D0E2}
html.qd-v6u main .final-band .btn-outline{background:transparent;color:#FFFFFF;border:1px solid rgba(255,255,255,.45)}

/* hub use-cases: categorie in card bianche */
html.qd-v6u .uc-cat{margin-top:16px}
html.qd-v6u .uc-cat-head h2{font-size:22px}
html.qd-v6u a.uc-tile{background:#FFFFFF;border:1px solid var(--c-line);border-radius:16px;box-shadow:0 1px 2px rgba(14,18,32,.04);min-height:64px;transition:transform .25s ease,border-color .2s ease}
html.qd-v6u a.uc-tile:hover{transform:translateY(-2px)}
html.qd-v6u a.uc-tile b{color:var(--c-ink)}
html.qd-v6u a.uc-tile .uc-sub{color:var(--c-muted);font-size:13px}
html.qd-v6u a.uc-tile .uc-word{background:var(--c-violet-soft);border-color:rgba(75,63,214,.18);color:var(--c-ink)}
html.qd-v6u .uc-choose{color:var(--c-body)}

@media (max-width:900px){
  html.qd-v6u .uc-hero .hero-card.pp-hero{padding:26px 28px 0}
  html.qd-v6u .uc-hero .hero-grid{grid-template-columns:1fr;gap:28px}
}
/* ── telefono: semplice. Una colonna, al massimo due corpi per card, bersagli >= 44px,
   liste lunghe in una sola riga scorrevole (tutte nel DOM), tabella in righe impilate ── */
@media (max-width:640px){
  html.qd-v6u .uc-hero.hero-outer{padding:12px 12px 0}
  html.qd-v6u .uc-hero .hero-card.pp-hero{padding:16px 18px 0;border-radius:24px}
  html.qd-v6u .uc-hero .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin-bottom:6px}
  html.qd-v6u .uc-hero .crumbs :is(a,em){display:inline-flex;align-items:center;min-height:44px}
  html.qd-v6u .uc-hero h1{font-size:34px}
  html.qd-v6u .uc-hero .lead{font-size:16px}
  html.qd-v6u .uc-hero :is(.tool-byline,.trust){font-size:14px}
  html.qd-v6u .uc-hero .cta-row{flex-direction:column;align-items:stretch}
  html.qd-v6u .uc-hero .cta-row a{min-height:52px;justify-content:center}
  /* scheda del target: etichetta sopra il valore, due corpi (14 / 16) */
  html.qd-v6u .uc-card{padding:18px}
  html.qd-v6u .uc-card-top b{font-size:16px}
  html.qd-v6u .uc-card-top .uc-sub{font-size:14px}
  html.qd-v6u .uc-rows li{grid-template-columns:1fr;gap:2px;font-size:14px}
  html.qd-v6u .uc-rows li b{font-size:16px}
  html.qd-v6u .uc-hero .uc-hero-art{margin:26px -4px -48px}
  html.qd-v6u .uc-hero .uc-hero-art::before{inset:12px -8px -10px 12px;border-radius:22px}
  html.qd-v6u .uc-hero .uc-hero-art img{aspect-ratio:360/300;border-radius:18px}
  html.qd-v6u body main>.section.facts-wrap{padding-top:92px}
  html.qd-v6u main .facts{grid-template-columns:1fr;gap:8px}
  html.qd-v6u main .facts>.fact{padding:14px 16px}
  html.qd-v6u main .facts>.fact strong{font-size:17px}
  html.qd-v6u main .facts>.fact span{font-size:14px}
  html.qd-v6u main .split .copy p{font-size:16px}
  html.qd-v6u main .split h2,html.qd-v6u main .section>h2{font-size:26px}
  html.qd-v6u .uc-fig figcaption{font-size:14px}
  /* tabella: righe impilate */
  html.qd-v6u .uc-fit-wrap{padding:4px 14px;overflow:visible}
  html.qd-v6u table.uc-fit,html.qd-v6u table.uc-fit :is(thead,tbody,tr,th,td){display:block;width:auto;min-width:0}
  html.qd-v6u table.uc-fit thead tr{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--c-line)}
  html.qd-v6u table.uc-fit thead th{border:0;padding:0;font-size:13px}
  html.qd-v6u table.uc-fit tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--c-line)}
  html.qd-v6u table.uc-fit tbody tr:last-child{border-bottom:0}
  html.qd-v6u table.uc-fit tbody td{border:0;padding:0;font-size:15px}
  html.qd-v6u table.uc-fit tbody td:nth-child(3){grid-column:1 / -1;font-size:15px}
  /* codice: va a capo invece di scorrere la pagina */
  html.qd-v6u main .code-card pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px}
  /* paesi (3) in colonna; prezzi (5) e collegati in una riga scorrevole */
  html.qd-v6u main .usecases .uc{min-height:56px}
  html.qd-v6u main .usecases .uc h3{font-size:16px}
  html.qd-v6u main .usecases .uc p{font-size:14px}
  html.qd-v6u main #related .uc-grid,html.qd-v6u .uc-tiers,html.qd-v6u .uc-tiles{display:flex;flex-wrap:nowrap;align-items:stretch;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;margin-left:-16px;margin-right:-16px;padding:2px 16px 14px;scrollbar-width:thin;grid-template-columns:none}
  html.qd-v6u main #related .uc-grid>.uc{flex:0 0 auto;width:min(76%,280px);scroll-snap-align:start}
  html.qd-v6u .uc-tiers>a{flex:0 0 auto;width:150px;scroll-snap-align:start;min-height:96px}
  html.qd-v6u .uc-tiers a b{font-size:22px}
  html.qd-v6u .uc-tiles>a.uc-tile{flex:0 0 auto;width:min(78%,270px);scroll-snap-align:start}
  html.qd-v6u a.uc-tile b{font-size:16px}
  html.qd-v6u a.uc-tile .uc-sub{font-size:14px}
  html.qd-v6u main .faq summary{min-height:56px}
  html.qd-v6u main .faq summary h3{font-size:16px}
  html.qd-v6u main .faq details p{font-size:15.5px}
  html.qd-v6u main .faq-side a{display:inline-flex;align-items:center;min-height:44px}
  html.qd-v6u main .final-band{padding:28px 20px;border-radius:22px}
  html.qd-v6u main .final-band :is(.btn-cta,.btn-outline){display:flex;justify-content:center;align-items:center;min-height:52px;margin-top:10px}
  html.qd-v6u main .uc-brands{font-size:13px}
  html.qd-v6u .qd-code-copy{min-height:44px;min-width:56px}
}
@media (prefers-reduced-motion:reduce){
  html.qd-v6u main *{transition:none!important}
}

/* Speed plans grid (19/10/2026): four columns of equal weight, so the hub's stacked
   phone layout (infrastructure-hubs.css, max-width 600px) would print "On sale"
   three times without its term. Keep it a real table; .cmp-wrap scrolls sideways. */
@media (max-width:600px){
  body[data-infrastructure-hub] main #speed-plans .cmp{display:table;min-width:460px}
  body[data-infrastructure-hub] main #speed-plans .cmp tbody{display:table-row-group}
  body[data-infrastructure-hub] main #speed-plans .cmp tr{display:table-row;border-bottom:0}
  body[data-infrastructure-hub] main #speed-plans .cmp :is(th,td){display:table-cell;padding:12px 12px;border-bottom:1px solid var(--line,#30354b);white-space:nowrap;font-size:13px}
  body[data-infrastructure-hub] main #speed-plans .cmp td:first-child{width:auto;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600}
  body[data-infrastructure-hub] main #speed-plans .cmp th:first-child{display:table-cell}
}