:root { --brand:#0C7DF2; --text:#111; --muted:#5f6368; --bg:#fff; --card:#f7f7f9; --line:#e6e6ee; --ok:#18a957; --warn:#e07b39; --top:#8B5CF6; --expired:#9aa0a6; }
* { box-sizing:border-box }
html, body { margin:0; padding:0 }
body { font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; color:var(--text); background:var(--bg); line-height:1.6 }
a { color:var(--brand) }
.wrap { max-width:960px; margin:0 auto; padding:0 16px }

.topbar { border-bottom:1px solid var(--line); background:#fff }
.topbar .wrap { display:flex; align-items:center; gap:20px; height:56px }
.topbar a { text-decoration:none; color:var(--text); font-weight:600 }
.sitelogo { display:flex; align-items:center; gap:10px; margin-right:auto }
.logo { width:32px; height:32px; border-radius:9px; background:var(--brand); display:grid; place-items:center; color:#fff; font-weight:700 }

.pagehead { padding:28px 0 8px }
.pagehead h1 { margin:0 0 6px; font-size:clamp(24px,4vw,34px); line-height:1.2 }
.pagehead.has-logo { display:flex; gap:16px; align-items:center }
.plogo { width:96px; height:80px; flex:none; display:grid; place-items:center; padding:8px; border:1px solid var(--line); border-radius:14px; background:#fff }
.plogo img { max-width:100%; max-height:100%; object-fit:contain }
@media (max-width:480px) { .plogo { width:72px; height:60px; padding:6px; border-radius:10px } }
.plogo.wide { width:200px }
@media (max-width:480px) { .plogo.wide { width:120px } }
.nowrap { white-space:nowrap }
.pagehead .sub { color:var(--muted); margin:0 }

.grid { display:grid; grid-template-columns:1fr; gap:14px; margin:20px 0; align-items:stretch }
@media (min-width:720px) { .grid { grid-template-columns:1fr 1fr } }
.coupon { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 16px 16px; display:flex; flex-direction:column; gap:8px; position:relative }
.coupon h3 { margin:0; font-size:18px; line-height:1.3 }
.coupon .meta { margin:0; font-size:14px; color:var(--muted) }
.coupon .until { display:block; margin-top:4px; font-weight:600 }
.coupon.expired { opacity:.6 }
.badge { position:absolute; right:12px; top:-10px; background:var(--brand); color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; text-transform:uppercase }
.badge.top { background:var(--top) }
.badge.warn { background:var(--warn) }
.badge.expired { background:var(--expired) }
.row { margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; color:var(--text); border:1px dashed var(--brand); background:#fff; padding:8px 10px; border-radius:10px; cursor:copy; position:relative }
.code.copied::after { content:"Copiado"; position:absolute; left:50%; top:-30px; transform:translateX(-50%); background:var(--ok); color:#fff; font:600 12px/1 system-ui,sans-serif; padding:6px 8px; border-radius:6px; white-space:nowrap }
.btn { display:inline-block; background:var(--brand); color:#fff; text-decoration:none; border:0; border-radius:12px; padding:10px 14px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit }
.btn.ghost { background:#fff; color:var(--brand); border:1px solid var(--brand) }
.btn.big { padding:14px 22px; font-size:17px }

.content { margin:32px 0 }
.content h2 { font-size:1.45rem; margin:2rem 0 .6rem; line-height:1.3 }
.content ul, .content ol { padding-left:1.2rem }
.content table { width:100%; border-collapse:collapse; margin:12px 0; font-size:15px }
.content th, .content td { border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; vertical-align:top }
.content pre { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; overflow-x:auto; font-size:13px; line-height:1.5; margin:8px 0 }
.newsbox { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:18px 0; padding:9px 0 }
.newsbox ul { list-style:none; margin:0; padding:0 }
.newsbox li { display:flex; gap:12px; align-items:baseline; line-height:1.45 }
.newsbox li + li { margin-top:6px }
.newsbox time { flex:none; font-weight:700; font-variant-numeric:tabular-nums; color:#c2410c }
.newsbox a { font-weight:600; color:inherit; text-decoration:underline; text-decoration-color:#c2410c; text-underline-offset:3px }
.newsbox a:hover { color:#c2410c }
.content th { font-size:13px; color:var(--muted); font-weight:600 }
.tablewrap { overflow-x:auto }
.topbar .wrap { overflow-x:auto; white-space:nowrap }
@media (max-width:440px) { .topbar .wrap { gap:14px } .topbar .sitename { display:none } }
.tip { background:#f6f7f9; border:1px solid var(--line); border-radius:12px; padding:14px 16px }
details { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:8px 0; background:#fff }
summary { cursor:pointer; font-weight:700 }
details > div { margin-top:8px }
.expired-list > summary { font-weight:600; color:var(--muted) }

.providers { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin:16px 0 }
.provider { border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; background:#fff; color:var(--text); text-decoration:none }
.plogo-box { display:flex; align-items:center; justify-content:center; height:56px; margin:0 auto 10px; max-width:140px }
.plogo-box img { max-width:100%; max-height:100%; object-fit:contain }
.provider small { color:var(--muted) }
a.provider { border-color:var(--brand) }
a.provider:hover { background:#f2f8ff }
.featured { border:1px solid var(--line); border-radius:16px; padding:24px; text-align:center; background:var(--card); margin:20px 0 }
.featured img { max-height:56px; width:auto; max-width:100%; height:auto }
.big-discount { font-size:3rem; font-weight:800; color:var(--ok); margin:.4rem 0 }

.newsletter { max-width:480px; margin:40px auto; padding:20px; border:1px solid var(--line); border-radius:14px; text-align:center }
.newsletter input[type=email] { width:100%; padding:12px; border:1px solid #ccc; border-radius:10px; font:inherit; margin:10px 0 }
.newsletter .msg { padding:10px; border-radius:8px; margin:10px 0 }
.msg.success { background:#d4edda; color:#155724 }
.msg.error { background:#f8d7da; color:#721c24 }
.small { font-size:13px; color:var(--muted) }

.sitefoot { border-top:1px solid var(--line); margin-top:48px; padding:20px 0; color:var(--muted); font-size:14px }
.sitefoot p { margin:.3rem 0 }
.footnav { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; padding:12px 0 20px; border-bottom:1px solid var(--line); margin-bottom:14px }
.footnav ul { list-style:none; margin:0; padding:0 }
.footnav li { margin:0 0 6px; line-height:1.4 }
.footnav a { color:var(--muted); text-decoration:none }
.footnav a:hover { color:var(--brand); text-decoration:underline }
.foothead { font-weight:700; color:var(--text); margin:0 0 10px !important; font-size:15px }
.footbase { font-size:13px }
@media (max-width:860px) { .footnav { grid-template-columns:repeat(3,1fr) } }
@media (max-width:540px) { .footnav { grid-template-columns:1fr 1fr; gap:20px 16px } .footnav a { display:inline-block; padding:3px 0 } }

.crumbs { font-size:14px; color:var(--muted); padding-top:16px }
.crumbs a { color:var(--muted) }
.pagehead { padding-top:12px }

.others { margin:40px 0 0 }
.others h2 { font-size:1.3rem }
.others-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px }
.others-list a { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; text-decoration:none; color:var(--text); font-weight:600; background:#fff }
.others-list a:hover { border-color:var(--brand); background:#f2f8ff }
.others-list img { width:64px; height:32px; object-fit:contain; flex:none }
.others-list small { display:block; font-weight:400; color:var(--muted) }

.compare td:first-child a { font-weight:700 }
.compare .num { white-space:nowrap }
.compare small { display:block; color:var(--muted); font-size:13px }
.compare td.best { background:#e9f8ef; color:#0d6b37; font-weight:700 }
.compare td.best strong { color:#0d6b37 }
.besttag { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px; background:var(--ok); color:#fff; font:600 11px/1.5 system-ui,sans-serif; font-style:normal; vertical-align:2px }

.deals { display:grid; grid-template-columns:1fr; gap:12px; margin:16px 0 }
@media (min-width:720px) { .deals { grid-template-columns:repeat(3,1fr) } }
.deal { display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:14px; padding:16px; background:var(--card); text-decoration:none; color:var(--text) }
.deal:hover { border-color:var(--brand) }
.deal img { height:32px; width:auto; max-width:140px; object-fit:contain; align-self:flex-start }
.deal .pct { font-size:2rem; font-weight:800; color:var(--ok); line-height:1.1 }
.deal strong { line-height:1.35 }
.deal .more { margin-top:auto; color:var(--brand); font-weight:600; font-size:15px }
.home h2 { font-size:1.45rem; margin:2.2rem 0 .4rem }
@media (max-width:640px) {
  .compare thead, .compare td.empty[data-l] { display:none }
  .compare, .compare tbody, .compare tr, .compare td { display:block; width:auto }
  .compare tr { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px; background:#fff }
  .compare td { border:0; padding:3px 0 }
  .compare td[data-l] { display:grid; grid-template-columns:105px 1fr; gap:8px }
  .compare td[data-l]::before { content:attr(data-l); color:var(--muted); font-size:13px }
  .compare td[data-l] > small { grid-column:2; white-space:normal }
  .compare td.num .besttag { margin:0 0 0 6px }
  .compare td.best { border-radius:8px; padding:3px 6px; margin:2px 0 }
  .compare td:first-child small { display:inline; margin-left:6px }
}
.history { margin:40px 0 0; border:1px solid var(--line); border-radius:14px; padding:16px; background:#fff }
.history h2 { font-size:1.3rem; margin-top:0 }
.history .chart { position:relative; padding:18px 0 20px 64px; font-size:12px; color:var(--muted) }
.history svg { width:100%; height:140px; display:block; border-left:1px solid var(--line); border-bottom:1px solid var(--line) }
.history .ytop { position:absolute; left:0; top:12px } .history .ybot { position:absolute; left:0; bottom:20px }
.history .xl { position:absolute; left:64px; bottom:0 } .history .xr { position:absolute; right:0; bottom:0 }
.history polyline { fill:none; stroke-width:2.5; vector-effect:non-scaling-stroke }
.history polyline.renew, .legend .renew::before { stroke:var(--muted); background:var(--muted) }
.history polyline.promo, .legend .promo::before { stroke:var(--ok); background:var(--ok) }
.legend { list-style:none; padding:0; margin:10px 0 0; font-size:15px }
.legend li::before { content:""; display:inline-block; width:14px; height:3px; margin-right:8px; vertical-align:middle }

.specs { border-collapse:collapse; font-size:14px; min-width:860px }
.specs th, .specs td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
.specs thead th { white-space:nowrap }
.specs thead th small { display:block; color:var(--muted); font-weight:400 }
.specs tbody th { position:sticky; left:0; background:var(--bg); font-weight:600; white-space:nowrap }

/* Verifica del dominio */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.dcform { display:flex; gap:8px; margin:16px 0 20px; max-width:560px }
.dcform input { flex:1; min-width:0; font:inherit; font-size:17px; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--text) }
.dcform input:focus { outline:2px solid var(--brand); outline-offset:1px }
.dcmsg { background:#fff5ec; border:1px solid var(--warn); border-radius:12px; padding:10px 14px }
.dcres { display:grid; gap:12px; margin-bottom:24px }
.dcrow { border:1px solid var(--line); border-radius:14px; padding:12px 16px; background:var(--card) }
.dchead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:18px }
.dcbadge { font-size:13px; font-weight:700; padding:2px 10px; border-radius:99px; color:#fff; background:var(--expired) }
.dc-free .dcbadge { background:var(--ok) }
.dc-taken .dcbadge { background:var(--warn) }
.dc-free { border-color:var(--ok) }
.dcinfo { margin:6px 0 0; padding-left:20px; font-size:15px }
.dclinks { margin:6px 0 0; font-size:15px }
.dcrow .tablewrap { margin-top:8px }
.dnsform { flex-wrap:wrap }
.dnsform details { flex-basis:100%; font-size:15px; border:0; padding:0; margin:0; background:none; box-shadow:none }
.dnsform details summary { cursor:pointer; color:var(--muted) }
.dnsform details input { margin-top:8px; max-width:260px; width:100% }
.dnsitem { border-top:1px solid var(--line); padding:10px 0 4px; margin-top:10px }
.dnsitem p { margin:0 0 6px; font-size:15px }
.dnsitem .dcbadge { margin-right:4px }
.dns-ok .dcbadge { background:var(--ok) }
.dns-warn .dcbadge { background:var(--warn) }
.dns-bad .dcbadge { background:#c0392b }
.dnsrec { display:block; font-size:13px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 10px; margin:4px 0; overflow-wrap:anywhere }

/* Guida alla scelta dell'hosting */
form.pick { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; margin:0 0 28px }
form.pick fieldset { border:0; margin:0 0 18px; padding:0 }
form.pick legend { font-weight:800; font-size:18px; margin-bottom:10px; padding:0 }
form.pick .opt { display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin:0 0 8px; cursor:pointer }
form.pick .opt:hover, form.pick .opt:has(:checked) { border-color:var(--brand) }
form.pick .opt:has(:checked) { background:#eef5ff }
form.pick .opt input { margin-top:4px; flex:none }
form.pick .opt small { display:block; color:var(--muted); font-size:14px }
form.pick.js fieldset { margin:0 }
form.pick .pickstep:empty { display:none }
.picknav { display:flex; gap:10px; margin-top:14px }
.pick-res { margin:0 0 20px }
ol.picks { list-style:none; padding:0; margin:16px 0; display:grid; gap:14px }
li.pick { border:1px solid var(--line); border-radius:16px; padding:16px; background:#fff }
li.pick.pick-best { border:2px solid var(--ok) }
li.pick h3 { margin:4px 0 6px; font-size:19px }
li.pick ul { margin:8px 0 12px; padding-left:20px }
.pickprice strong { font-size:22px; color:var(--ok) }
@media (min-width:860px) { ol.picks { grid-template-columns:repeat(3, 1fr) } }
[hidden] { display:none !important }
.pickcta { background:#eef5ff; border:1px solid #cfe2ff; border-radius:14px; padding:14px 16px; margin:0 0 24px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center }
.pickcta .btn { margin-left:auto }

/* Introduzione e inviti all'azione */
.topbar a.navcta { color:#fff; padding:7px 12px; font-size:14px }
.hero { background:linear-gradient(135deg,#0C7DF2 0%,#0a5fc0 55%,#3b2fb8 100%); color:#fff; padding:36px 0 40px }
.hero .wrap { display:grid; gap:24px; align-items:center }
@media (min-width:820px) { .hero .wrap { grid-template-columns:1.35fr 1fr } }
.hero h1 { margin:0 0 10px; font-size:clamp(28px,4.6vw,42px); line-height:1.15 }
.hero .sub { color:#dbe9ff; margin:0 0 18px; font-size:18px }
.hero-cta { display:flex; flex-wrap:wrap; gap:10px }
.hero .btn { background:#fff; color:#0a4fa3 }
.hero .btn.ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.75) }
.hero .btn:hover { filter:brightness(.96) }
.trust { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; color:#dbe9ff }
.trust li::before { content:"✓"; margin-right:6px; color:#7dffb0; font-weight:800 }
.hero-card { background:#fff; color:var(--text); border-radius:18px; padding:20px; box-shadow:0 12px 30px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:6px }
.hero-card img { height:36px; width:auto; align-self:flex-start; object-fit:contain }
.hero-card .pct { font-size:2.6rem; font-weight:800; color:var(--ok); line-height:1 }
.hero-card strong { font-size:19px; line-height:1.3 }
.hero-card p { margin:0 0 6px; color:var(--muted); font-size:15px }
.hero-card .btn { background:var(--brand); color:#fff }
.home > h2:first-child { margin-top:1.6rem }
.deal { background:#fff; box-shadow:0 2px 10px rgba(12,125,242,.07) }
.deal .row { margin-top:8px }
.deal .more { text-decoration:none; margin-top:6px }
.intents { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:14px 0 }
.intents a { display:flex; flex-direction:column; gap:2px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--text); text-decoration:none; transition:border-color .15s, transform .15s }
.intents a:hover { border-color:var(--brand); transform:translateY(-2px) }
.intents b::after { content:"\00a0→"; color:var(--brand) }
.intents span { color:var(--muted); font-size:14px; line-height:1.4 }
.domainband { background:#eef5ff; border:1px solid #cfe2ff; border-radius:16px; padding:6px 18px 14px; margin:28px 0 }
.domainband h2 { margin-top:12px !important }
.domainband .dcform { margin:10px 0 6px }
.provider { position:relative; transition:transform .15s }
.provider:hover { transform:translateY(-2px) }
.pmax { display:inline-block; margin:6px 0 0 6px; padding:2px 10px; border-radius:999px; background:var(--ok); color:#fff; font-size:13px; font-weight:700 }
.newsletter { max-width:none; background:linear-gradient(135deg,#f2f8ff,#f4f0ff); border-color:#d9e6ff }
.newsletter form { display:flex; gap:8px; max-width:520px; margin:0 auto; flex-wrap:wrap }
.newsletter input[type=email] { flex:1 1 220px; margin:0 }
.ctabox { margin:40px 0 0; padding:18px 20px; border-radius:16px; background:linear-gradient(135deg,#0C7DF2,#3b2fb8); color:#fff; display:grid; gap:12px 20px; align-items:center }
@media (min-width:720px) { .ctabox { grid-template-columns:1fr auto } }
.ctabox-text { display:flex; flex-direction:column; gap:2px }
.ctabox-kicker { text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.05em; color:#cfe0ff }
.ctabox-text strong { font-size:20px; line-height:1.3 }
.ctabox-text span:last-child { color:#dbe9ff; font-size:15px }
.ctabox .row { margin:0 }
.ctabox .code { background:#fff; border-color:#fff }
.ctabox .btn { background:#fff; color:#0a4fa3 }
.ctabox-alt { grid-column:1/-1; margin:0; font-size:14px; color:#dbe9ff }
.ctabox-alt a { color:#fff }
.compare .btn { padding:7px 12px; font-size:14px; white-space:nowrap }
.coupon { transition:border-color .15s, box-shadow .15s }
.coupon:hover { border-color:var(--brand); box-shadow:0 4px 16px rgba(12,125,242,.1) }
@media (max-width:520px) { .topbar .navopt { display:none } .topbar a.navcta { padding:6px 10px } .hero { padding:24px 0 28px } }
@media (max-width:640px) {
  .compare td[data-l=""] { display:block }
  .compare td[data-l=""]::before { content:none }
  .compare td:last-child .btn { display:block; text-align:center; margin-top:8px; padding:10px 12px; font-size:15px }
  .compare td:first-child { padding-bottom:6px; margin-bottom:4px; border-bottom:1px solid var(--line) }
  .compare td:first-child a { font-size:17px }
  .compare td.num > strong { font-size:18px }
  .provider small { font-size:12px }
  .intents { grid-template-columns:1fr 1fr; gap:8px }
  .intents a { padding:11px 12px; border-radius:12px }
  .intents b { font-size:15px; line-height:1.3 }
  .intents span { font-size:13px }
  .providers { grid-template-columns:1fr 1fr; gap:8px }
  .provider { padding:10px 8px }
  .plogo-box { height:40px; margin-bottom:6px; max-width:120px }
  .pagehead.has-logo { align-items:flex-start }
}
.tip > p:first-child { margin-top:0 }
.tip > :last-child { margin-bottom:0 }
.content { margin-top:20px }
.compare td.num { font-weight:700 }
.compare td.num small { font-weight:400 }
@media (max-width:640px) { .compare td.num { font-size:17px } .compare td.num small { font-size:13px } .tip ul { padding-left:1.1rem } }
.compare .num small { white-space:normal }
.compare td.num { min-width:150px }
@media (max-width:640px) {
  .hero-cta .btn { flex:1 1 100%; text-align:center }
  .deal { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:14px }
  .deal > a:first-child { grid-column:1 }
  .deal .pct { grid-column:2; grid-row:1; font-size:1.6rem }
  .deal strong, .deal .row, .deal .more { grid-column:1/-1 }
  .deal .row { margin-top:6px }
  .deal .row .btn { flex:1; text-align:center }
  .deal .more { margin-top:2px; font-size:14px }
}
@media (max-width:640px) {
  .compare td[data-l] { display:block; position:relative; padding-left:113px; min-height:1.7em }
  .compare td[data-l]::before { position:absolute; left:0; top:4px; width:105px; line-height:1.4 }
  .compare td[data-l] > small { display:block }
  .compare td[data-l=""] { padding-left:0; min-height:0 }
  .compare td.best { padding-left:119px }
  .compare td.best::before { left:6px }
  .coupon .row .btn { flex:1 1 auto; text-align:center }
}
h1, h2, h3 { line-height:1.25 }
.badge { text-transform:none; font-size:13px; padding:3px 10px }
.ctabox-kicker { text-transform:none; letter-spacing:0; font-size:14px }

/* Grafico a barre dei prezzi (confronto in 3 anni) */
.bars { list-style:none; margin:16px 0 20px; padding:0 }
.bars li { display:grid; grid-template-columns:150px 1fr 90px; align-items:center; gap:12px; margin:0 0 8px }
.bars .bar { height:12px; background:var(--card); border-radius:6px; overflow:hidden }
.bars .bar i { display:block; height:100%; background:var(--brand); border-radius:6px }
.bars li:first-child .bar i { background:var(--ok) }
.bars b { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
@media (max-width:540px) { .bars li { grid-template-columns:1fr auto; gap:2px 10px } .bars .bar { grid-column:1 / -1; grid-row:2 } }
@media (max-width:640px) {
  .compare.auto td:first-child { font-weight:700; font-size:17px }
  .compare.auto td[data-l] { display:grid; grid-template-columns:105px 1fr; gap:10px; padding:5px 0; min-height:0 }
  .compare.auto td[data-l]::before { position:static; width:auto; line-height:1.35; padding-top:2px }
}
/* Confronto principale su mobile: riga compatta, prezzo a destra, note piccole sotto il nome. */
@media (max-width:640px) {
  .compare.tight tr { display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:start; padding:12px 14px }
  .compare.tight td, .compare.tight td[data-l] { display:block; position:static; padding:0; min-height:0; margin:0; border:0 }
  .compare.tight td[data-l]::before { content:none }
  .compare.tight td:nth-child(1) { grid-column:1; grid-row:1; padding:0; margin:0; border:0 }
  .compare.tight td:nth-child(1) small { display:block; margin:2px 0 0 }
  .compare.tight td:nth-child(2) { grid-column:2; grid-row:1 / span 2; text-align:right; min-width:0 }
  .compare.tight td:nth-child(2) small { max-width:150px; margin-left:auto; font-size:12px; line-height:1.35 }
  .compare.tight td:nth-child(3) { grid-column:1; grid-row:2; font-size:14px; font-weight:400; color:var(--muted); align-self:end }
  .compare.tight td[data-l]:nth-child(3)::before { content:"luego\00a0"; display:inline; position:static; width:auto; color:inherit; font-size:inherit }
  .compare.tight td.same { display:none }
  .compare.tight td:nth-child(4), .compare.tight td:nth-child(5) { grid-column:1 / -1; font-size:14px; color:var(--muted); line-height:1.4 }
  .compare.tight td:nth-child(4) { margin-top:8px }
  .compare.tight td:nth-child(4).empty { display:none }
  .compare.tight td:nth-child(4).empty + td { margin-top:8px }
  .compare.tight td:last-child { grid-column:1 / -1 }
  .compare.tight td:last-child .btn { margin-top:10px; padding:9px 12px }
}
.proscons { display:grid; gap:4px 32px; margin:8px 0 }
@media (min-width:720px) { .proscons { grid-template-columns:1fr 1fr } }
.proscons h3 { font-size:1.05rem; margin:.6rem 0 .2rem }
.proscons ul { list-style:none; padding:0; margin:0 }
.proscons li { position:relative; padding:6px 0 6px 26px; border-bottom:1px solid var(--line); line-height:1.45 }
.proscons li::before { position:absolute; left:2px; top:5px; font-weight:800 }
.proscons .pros li::before { content:"+"; color:var(--ok) }
.proscons .cons li::before { content:"−"; color:#c2410c }
@media (min-width:720px) { .providers.all { grid-template-columns:repeat(3,1fr) } }
@media (max-width:640px) { .compare td:first-child { font-weight:700 } .compare td:first-child small { font-weight:400 } }

/* Interruzioni degli hosting */
.mon { font-weight:700; font-size:14px }
.mon::before { content:''; display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; background:currentColor }
.mon-ok { color:var(--ok) }
.mon-bad { color:#c0392b }

/* ==== Design 2026: variante D (intestazione gialla, pulsanti neri, codici con bordo tratteggiato) ==== */
:root { --brand:#111; --mint:#ffd400; --link:#0a58ca; --text:#111; --muted:#626262; --bg:#fff; --card:#fff; --line:#e5e5e5; --ok:#1a7f37; --top:#111; --ink:#111; --y:#ffd400; --paper:#faf7ef; --dash:#c9c2ae; --ring:0 0 0 1px var(--line) }
body { font-family:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); overflow-x:clip }
h1, h2, h3 { letter-spacing:-.02em; font-weight:800 }
.wrap { max-width:1100px; padding:0 20px }
a { color:var(--link); text-underline-offset:3px; text-decoration-thickness:1px }
::selection { background:var(--y) }
.code, .mono { font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums }

/* Intestazione */
.topbar { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line) }
.topbar .wrap { height:60px; gap:6px }
.topbar a { font-weight:500; color:var(--text); padding:7px 10px; font-size:15px }
.topbar a:not(.sitelogo):not(.navcta):hover { text-decoration:underline }
.sitelogo { padding-left:0 !important; font-weight:800 !important; font-size:20px; gap:0 !important; letter-spacing:-.01em }
.sitelogo .sitename i { font-style:normal; background:var(--y); padding:0 4px }
.logo { display:none }
.topbar a.navcta { background:var(--ink); color:#fff; margin-left:6px; padding:8px 14px; border-radius:6px }

/* Pulsanti e codici */
.btn { background:var(--ink); color:#fff; border-radius:6px; font-weight:500; box-shadow:none }
.btn:hover { background:#333 }
.btn.ghost { background:#fff; color:var(--ink); border:2px solid var(--ink) }
.code { border:0; background:var(--y); color:var(--ink); font-weight:700; letter-spacing:.02em; border-radius:0; padding:8px 10px }
.code:hover { background:#ffe14d }

/* Introduzione */
.hero { background:var(--y); color:var(--ink); padding:40px 0 34px }
.hero .wrap { display:block }
.hero h1 { font-size:clamp(32px,5.2vw,48px); line-height:1.05; letter-spacing:-.025em; font-weight:800; margin:0 0 14px; max-width:860px }
.hero .sub { color:var(--ink); font-size:18px; line-height:1.5; margin:0 0 20px }
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.chips > span { font-weight:500; margin-right:4px }
.chips a { border:2px solid var(--ink); border-radius:999px; padding:6px 14px; font-weight:500; background:#fff; color:var(--ink); text-decoration:none }
.chips a:hover { background:var(--ink); color:#fff }

/* Titoli di sezione */
.home h2, .content h2 { font-size:clamp(1.4rem,2.4vw,1.6rem); letter-spacing:-.02em; margin:2.6rem 0 .3rem }
.home h2 + .sub { color:var(--muted); margin:0 0 16px }
.kicker { display:block; color:var(--muted); font-size:14px; font-weight:600; margin:3rem 0 -.6rem }
.kicker + h2 { margin-top:.7rem !important }

/* Codici: bordo tratteggiato e forbici */
.coupons { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:16px; margin:0 }
@media (max-width:900px) { .coupons { grid-template-columns:1fr 1fr } .coupons .cp.big { grid-column:1/-1 } }
@media (max-width:560px) { .coupons { grid-template-columns:1fr } }
.cp, .coupon, .deal { background:var(--paper); border:2px dashed var(--dash); border-radius:8px; padding:16px; position:relative; display:flex; flex-direction:column; gap:8px; box-shadow:none }
.cp.big { background:#fff; border-color:var(--ink) }
.cp::after, .coupon::after { content:'✂'; position:absolute; top:-12px; right:14px; background:var(--bg); padding:0 4px; color:var(--muted); font-size:15px; line-height:1.3 }
.coupon.expired::after { content:none }
.cp img { height:24px; width:auto; max-width:140px; object-fit:contain; align-self:flex-start }
.cp .pct { font:700 38px/1 'IBM Plex Mono',monospace; letter-spacing:-.02em }
.cp.big .pct { font-size:52px }
.cp .t { font-weight:500; line-height:1.35 }
.cp .then { font-size:13px; color:var(--muted) }
.cp .row { margin-top:auto; padding-top:4px }
.cp .more { font-size:14px; color:var(--muted) }
.coupon { padding:20px 18px 18px }
.coupon .badge { right:auto; left:14px }
.badge { background:#fff; color:var(--ink); border:1.5px solid var(--ink); font-weight:600; top:-12px; text-transform:none }
.badge.top { background:var(--y); color:var(--ink); border-color:var(--ink) }
.badge.warn { background:#fff3e0; color:#9a4a00; border-color:#e07b39 }
.badge.expired { background:#f1f1f1; color:#6b6b6b; border-color:#ccc }
.deal .pct { font:700 32px/1 'IBM Plex Mono',monospace }

/* Quanto si paga in un anno e in tre */
.cost { margin:0 }
.cost-head, .cost-row { display:grid; grid-template-columns:170px 160px 1fr 110px 110px; align-items:center; gap:18px }
.cost-head { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border-bottom:2px solid var(--ink); padding:6px 0 }
.cost-head .r { text-align:right }
.cost-row { padding:13px 0; border-bottom:1px solid var(--line); color:var(--text); text-decoration:none }
.cost-row img { height:24px; width:auto; max-width:120px; object-fit:contain; display:block; margin-bottom:3px }
.cost-row small { color:var(--muted); font-size:13px }
.cost-row .p1 { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap } .cost-row .p1 small { display:block; font-weight:400 }
.track { position:relative; height:14px }
.track .rg, .track .pr { position:absolute; left:0; top:1px; height:12px; border-radius:6px }
.track .rg { background:#ddd } .track .pr { background:var(--ok) }
.track span { position:absolute; top:-3px; font-size:14px; white-space:nowrap }
.cost-row .p3 { text-align:right; font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap }
.cost-row:first-of-type .p3 { justify-self:end; background:var(--y); padding:0 6px }
.cost-row .btn { text-align:center }
@media (max-width:640px) {
  .cost-head { display:none }
  .cost-row { grid-template-columns:1fr auto; gap:6px 12px }
  .cost-row .track { grid-column:1/-1 }
  .cost-row .btn { grid-column:1/-1 }
}

/* Schede e blocchi */
.provider, .intents a, .others-list a, li.pick, .dcrow { background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:none }
.provider:hover, .intents a:hover, .others-list a:hover { border-color:var(--ink); background:#fff }
.intents { gap:10px }
.intents a { padding:14px 16px }
.intents b { font-weight:700 }
.intents b::after { content:'\00a0›'; color:var(--ink) }
.provider { padding:18px 14px }
.pmax { background:var(--y); color:var(--ink); font-weight:700 }
.domainband { background:var(--paper); border:2px solid var(--ink); border-radius:8px; padding:8px 22px 16px; box-shadow:none }
.dcform input { border:2px solid var(--ink); border-radius:6px }
.dcform input:focus { outline:3px solid var(--y) }
.logostrip { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; padding:22px 0 6px; margin:0 }
.logostrip span { width:100%; font-size:13px; color:var(--muted) }
.logostrip a { display:block; opacity:.75; filter:grayscale(1) } .logostrip a:hover { opacity:1; filter:none }
.logostrip img { height:22px; width:auto; max-width:120px; object-fit:contain; display:block }

/* Tabelle */
.content table { border-collapse:collapse; background:#fff }
.content th { background:none; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:9px 10px; border-bottom:2px solid var(--ink) }
.content td { padding:11px 10px; border-bottom:1px solid var(--line) }
.compare td.best { background:#fff7c2; color:var(--ink) }
.compare td.best strong { color:var(--ink) }
.besttag { background:var(--ink) }
@media (max-width:640px) { .compare tr { border:1px solid var(--line) !important; border-radius:8px !important } }

/* Pagine */
main.wrap > .crumbs { padding-top:20px }
.pagehead { padding-bottom:18px; border-bottom:2px solid var(--ink); margin-bottom:8px }
.pagehead h1 { font-size:clamp(28px,4.4vw,42px); letter-spacing:-.025em; line-height:1.08; font-weight:800 }
.pagehead .sub { font-size:17px; color:#3d3d3d }
.plogo { border:1px solid var(--line); border-radius:8px }
.crumbs { font-size:13.5px } .crumbs a { text-decoration:none } .crumbs a:hover { text-decoration:underline }

/* Altri blocchi */
.tip { background:var(--paper); border:0; border-left:4px solid var(--y); border-radius:0 }
details { border:1px solid var(--line); border-radius:8px; padding:12px 14px; box-shadow:none }
summary { font-weight:600 }
.ctabox { border-radius:8px; background:#fff; color:var(--ink); border:2px dashed var(--ink); padding:20px 22px }
.ctabox .btn { background:var(--ink); color:#fff }
.ctabox-kicker { color:var(--muted) }
.newsletter { background:var(--y); color:var(--ink); border:0; border-radius:8px; padding:36px 24px }
.newsletter p, .newsletter .small { color:var(--ink) } .newsletter a { color:var(--ink) }
.newsletter h2 { margin-top:0 !important }
.newsletter input[type=email] { background:#fff; border:2px solid var(--ink); border-radius:6px }
.newsletter .btn { background:var(--ink); color:#fff }
.sitefoot { background:#f5f5f2; color:var(--muted); border-top:2px solid var(--ink); margin-top:64px; padding:36px 0 24px }
.footnav a { color:#444 } .footnav a:hover { color:var(--ink); text-decoration:underline }
.foothead { color:var(--ink) }
.sitefoot a { color:#333 }
.history, form.pick { border:1px solid var(--line); box-shadow:none; background:#fff }
form.pick .opt { border-color:var(--line); border-radius:6px }
form.pick .opt:has(:checked) { background:#fff7c2; border-color:var(--ink) }
@media (max-width:520px) { .hero { padding:28px 0 26px } .topbar a { padding:6px 8px } }
.pct, .big-discount, .pmax { font-variant-numeric:tabular-nums; font-weight:800 }
.compare td.num { font-variant-numeric:tabular-nums }
/* Calcolatore */
.calc { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); background:#fff; border-radius:18px; box-shadow:var(--ring); padding:22px; margin:1rem 0 1.4rem }
.calc label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:#2b3448 }
.calc select, .calc input[type=number] { font:inherit; font-weight:400; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); min-width:0 }
.calc label.chk { flex-direction:row; align-items:center; font-weight:500 }
.calc-out { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; background:var(--ink); border-radius:14px; padding:16px; color:#fff }
.calc-out span { display:block; font-size:12.5px; color:#9aa7c0 }
.calc-out b { font-size:clamp(1.15rem,3vw,1.7rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.calc .small { grid-column:1/-1; margin:0 }
.calc .btn { grid-column:1/-1; justify-self:start }
/* Recensioni (non usate) */
.verdict { background:var(--ink); color:#e6ebf5; border-radius:18px; padding:20px 22px; position:relative; overflow:hidden; isolation:isolate; margin:1rem 0 }
.verdict::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(380px 180px at 100% 0%,rgba(109,74,255,.45),transparent 70%) }
.verdict p { margin:.3rem 0 } .verdict .small { color:#aeb9cf } .verdict a { color:#b9c9ff } .verdict code { background:rgba(255,255,255,.1); padding:1px 6px; border-radius:6px }
.verdict-k { color:var(--mint); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em }
.rk { display:inline-block; padding:2px 10px; border-radius:999px; background:#f1f3f7; color:#4b5871; font-weight:600; font-size:14px; font-variant-numeric:tabular-nums }
.rk.rk3 { background:#eaf0ff; color:#1d3fcc } .rk.rk1 { background:#e3f9ef; color:#05734d }
.forwhom { margin-top:1.5rem }
.rank td small { display:block; color:var(--muted,#6b7385); font-size:12.5px; margin-top:2px }
/* Generatore SPF */
.gen-box { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; min-width:0 }
.gen-box legend { font-weight:700; margin-bottom:8px; font-size:15px }
.gen-box input[type=text], .gen-box input[type=email] { font:inherit; font-weight:400; padding:10px 12px; border:1px solid var(--line); border-radius:10px; min-width:0 }
.gen-box label.chk span { font-weight:500 }
.gen-out { grid-column:1/-1; background:var(--ink); color:#e6ebf5; border-radius:14px; padding:16px 18px; min-width:0 }
.gen-out p { margin:.4rem 0 } .gen-out pre { margin:.3rem 0 .5rem; background:rgba(255,255,255,.07); border-radius:10px; padding:12px; white-space:pre-wrap; word-break:break-all }
.gen-out pre code { color:var(--mint); background:none; font-size:14px }
.gen-out p code { background:rgba(255,255,255,.1); color:#fff; padding:1px 6px; border-radius:6px }
.gen-k { display:inline-block; font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--mint); margin-right:6px }
.gen-warn { color:#ffd38a; font-size:14px }
.btn.small { padding:6px 14px; font-size:14px }
.compare td small { display:block }
.gen-out .btn { background:#fff; color:var(--ink); border:0; cursor:pointer; font-weight:600; border-radius:999px }
/* Miglior hosting */
.toc { display:flex; flex-wrap:wrap; gap:8px; margin:1rem 0 1.4rem }
.toc a { background:#fff; box-shadow:var(--ring); border-radius:999px; padding:7px 14px; font-size:14px; text-decoration:none; color:var(--text) }
.toc a strong { color:var(--brand); margin-left:4px }
section.best { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; margin-bottom:2rem }
.best-card { background:#fff; border-radius:8px; border:1px solid var(--line); padding:20px; display:flex; flex-direction:column; scroll-margin-top:80px }
.best-card > p { margin:.4rem 0; font-size:15px }
.best-k { font-size:12.5px !important; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.best-head { display:flex; gap:14px; align-items:center; margin:.4rem 0 .6rem }
.best-head .plogo { width:56px; height:56px; flex:none }
.best-head h2 { margin:0; font-size:21px } .best-head h2 small { font-size:13px; font-weight:500; color:var(--muted,#6b7385) }
.best-price { margin:2px 0 0; font-weight:800; font-size:20px; font-variant-numeric:tabular-nums } .best-price span { font-weight:500; font-size:13px; color:var(--muted,#6b7385) }
.best-links { margin-top:auto !important; padding-top:8px; display:flex; gap:14px; align-items:center }
.best-price span { display:block; margin-top:2px }
/* Loghi nelle tabelle e nelle schede delle offerte */
.hcell a { display:inline-flex; align-items:center; gap:10px; font-weight:600 }
.tlogo { width:84px; height:32px; object-fit:contain; flex:none; background:#fff; border-radius:6px; padding:3px; box-shadow:var(--ring) }
.clogo { display:block; width:auto; max-width:120px; height:32px; object-fit:contain; margin:4px 0 8px; background:#fff; border-radius:8px; padding:4px 6px; box-shadow:var(--ring) }
@media (max-width:640px) { .tlogo { width:72px; height:28px } }
@media (max-width:440px) { .topbar .sitename { display:inline; font-size:17px } .topbar .wrap { gap:4px } }
.track i { position:absolute; left:0; top:1px; height:12px; border-radius:6px }
.cost-row > a:first-child { color:inherit; text-decoration:none }
.cost-row .p1 small { font-size:12px; line-height:1.3 }
@media (max-width:640px) {
  .cost-row { grid-template-columns:1fr auto; grid-template-areas:"h p3" "p1 p1" "tr tr"; gap:6px 12px }
  .cost-row > a:first-child { grid-area:h } .cost-row .p3 { grid-area:p3; align-self:start } .cost-row .p1 { grid-area:p1 } .cost-row .track { grid-area:tr }
  .cost-row .p1 small { display:inline; margin-left:6px }
  .cost-row .btn { display:none }
}
@media (max-width:560px) { .topbar a.navopt, .topbar a[href="/black-friday-hosting/"] { display:none } }
/* Pulsanti blu */
:root { --cta:#1f5eff; --cta-h:#174bd1 }
.btn, .topbar a.navcta, .newsletter .btn, .ctabox .btn, .gen-out .btn { background:var(--cta); color:#fff }
.btn:hover, .topbar a.navcta:hover, .newsletter .btn:hover, .ctabox .btn:hover { background:var(--cta-h); color:#fff }
.btn.ghost { background:#fff; color:var(--cta); border-color:var(--cta) }
/* Box CTA in stile codice sconto */
.ctabox { background:var(--paper); border:2px dashed var(--ink); color:var(--ink); position:relative }
.ctabox::after { content:'✂'; position:absolute; top:-12px; right:14px; background:var(--bg); padding:0 4px; color:var(--muted); font-size:15px; line-height:1.3 }
.ctabox-kicker { color:var(--muted); font-weight:600 }
.ctabox-text strong { color:var(--ink) }
.ctabox-text span:last-child, .ctabox-alt { color:#444 }
.ctabox-alt a { color:var(--link) }
.ctabox .code { background:var(--y); border:0; color:var(--ink) }
/* Offerte di altri hosting: logo sopra il nome, schede di uguale altezza */
.others-list { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
.others-list a { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:8px; min-width:0; height:100% }
.others-list a span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.others-list img { width:88px; height:32px; object-position:left center }
/* Calcolatore del prezzo dell'hosting */
.calc-bars li { grid-template-columns:170px 1fr 100px; row-gap:2px }
.calc-bars a small { display:block; font-size:12.5px; color:var(--muted,#6b7488); font-weight:400 }
.calc-bars em { grid-column:2 / -1; font-style:normal; font-size:13px; color:var(--muted,#6b7488) }
.calc-bars li:first-child b { color:var(--ok) }
@media (max-width:540px) { .calc-bars li { grid-template-columns:1fr auto } .calc-bars em { grid-column:1 / -1 } }
.sources { font-size:14px; color:var(--muted,#6b7488); padding-left:1.4em } .sources li { margin:2px 0 } .sources a { word-break:break-all }

/* Codice con spiegazione (code_tip): sottolineatura punteggiata, il fumetto .tipbox lo posiziona uno script in footer.php */
.ctip { border-bottom:1px dotted currentColor; cursor:help; white-space:nowrap }
.ctip:focus-visible { outline:2px solid var(--link); outline-offset:2px }
.tipbox { position:fixed; z-index:60; max-width:min(300px, calc(100vw - 16px)); background:var(--ink); color:#fff; font-size:13px; line-height:1.45; font-weight:400; text-align:left; text-transform:none; letter-spacing:0; white-space:normal; padding:8px 11px; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.18); pointer-events:none }
.tipbox[hidden] { display:none }
.tipbox { white-space:pre-line }
.ctip.sum { border-bottom-width:2px }
.cost-row .p3 small { display:block; font-size:12px; font-weight:400; color:var(--muted) }
.cost-row .p1 small.y1 { display:block; margin:3px 0 0; color:var(--text) }
/* Spiegazione dei termini per principianti */
.simple { background:#f6f7f9; border-left:4px solid var(--dash); padding:12px 16px; margin:1rem 0 }
/* Ricerca */
.searchform { display:flex; gap:8px; margin:0 0 1.2rem }
.searchform input { flex:1; min-width:0; font:inherit; font-size:17px; padding:10px 12px; border:2px solid var(--ink); border-radius:6px }
.results { list-style:none; padding:0; margin:0 }
.results li { padding:14px 0; border-bottom:1px solid var(--line) }
.results li > a { font-weight:700; font-size:18px }
.results small { display:block; color:var(--muted); font-size:13px }
.results p { margin:.3rem 0 0 }
.topbar a.navsearch { display:inline-flex; align-items:center; padding:7px 8px }
.navsearch svg { display:block }