/* materassisulweb.it — Guida Casino Non AAMS
   Modern palette: near-black indigo header, warm off-white canvas, amber/orange CTA accent. */

:root{
  --bg:#f7f5f0;
  --surface:#ffffff;
  --surface-alt:#f0ece3;
  --text:#15171f;
  --text-muted:#565f6d;
  --border:#e5ded2;
  --header-1:#0b0e1f;
  --header-2:#1c2142;
  --accent-1:#f6a821;
  --accent-2:#ea6a1f;
  --accent-text:#181205;
  --indigo:#5b4fd6;
  --indigo-deep:#443aa8;
  --emerald:#0f9d63;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-card:0 14px 30px -18px rgba(15,17,31,.35);
  --shadow-soft:0 6px 18px -10px rgba(15,17,31,.25);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Sora","Inter",system-ui,sans-serif;
  color:var(--text);
  line-height:1.25;
  letter-spacing:-0.01em;
  margin:0 0 .6em;
}
h1{font-size:clamp(1.9rem,4vw,2.75rem);font-weight:700;}
h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;margin-top:2.6em;}
h3{font-size:clamp(1.15rem,2.4vw,1.4rem);font-weight:600;margin-top:2em;}
p{margin:0 0 1.1em;color:var(--text);}
a{color:var(--indigo-deep);text-decoration-thickness:1.5px;}
a:hover{color:var(--indigo);}
img{max-width:100%;display:block;}
.container{width:100%;max-width:920px;margin:0 auto;padding:0 20px;}

/* Header */
.site-header{
  background:linear-gradient(135deg,var(--header-1),var(--header-2));
  padding:14px 0;
  position:sticky;top:0;z-index:40;
  box-shadow:0 2px 14px -6px rgba(0,0,0,.4);
}
.header-inner{
  max-width:920px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  color:#f6f4ee;font-family:"Sora",sans-serif;font-weight:700;font-size:1.02rem;
  text-decoration:none;
}
.brand-mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:var(--accent-text);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;
}
.site-nav{display:flex;gap:18px;flex-wrap:wrap;}
.site-nav a{color:#c7cbe0;font-size:.92rem;font-weight:600;text-decoration:none;}
.site-nav a:hover{color:#fff;}

/* Hero */
.hero{
  background:linear-gradient(160deg,var(--header-1) 0%,var(--header-2) 60%,var(--header-2) 100%);
  color:#f3f2ec;
  padding:52px 0 60px;
}
.hero .container{max-width:820px;}
.eyebrow{
  display:inline-block;text-transform:uppercase;letter-spacing:.09em;font-size:.75rem;
  font-weight:700;color:var(--accent-1);margin-bottom:14px;
}
.hero h1{color:#fff;margin-bottom:.5em;}
.hero .lede{color:#c9cce2;font-size:1.05rem;max-width:70ch;}

.byline{
  margin-top:28px;display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-md);padding:12px 16px;max-width:fit-content;
}
.byline img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;}
.byline strong{display:block;color:#fff;font-size:.95rem;}
.byline span{display:block;color:#b7bad4;font-size:.82rem;}

/* Toplist band */
.toplist-band{background:var(--surface-alt);padding:34px 0 40px;border-bottom:1px solid var(--border);}
.toplist-heading{margin-top:0;text-align:center;font-size:clamp(1.25rem,2.6vw,1.6rem);}
.toplist-sub{text-align:center;color:var(--text-muted);max-width:60ch;margin:0 auto 22px;font-size:.95rem;}
.trust-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:20px;
  font-size:.82rem;color:var(--text-muted);
}
.trust-strip span{display:flex;align-items:center;gap:6px;font-weight:600;}
.trust-strip .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);display:inline-block;}

/* Article */
.article{padding:44px 0 20px;}
.article > p:first-child{font-size:1.06rem;}

.note-box{
  background:var(--surface-alt);border-left:4px solid var(--indigo);
  border-radius:var(--radius-sm);padding:14px 18px;margin:0 0 1.4em;font-size:.95rem;color:var(--text-muted);
}

.brand-list{
  list-style:none;margin:0 0 1.6em;padding:0;
  display:grid;gap:10px;
}
.brand-list li{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:14px 16px;display:flex;align-items:baseline;gap:10px;box-shadow:var(--shadow-soft);
}
.brand-list .rank{
  font-family:"Sora",sans-serif;font-weight:800;color:var(--indigo);min-width:1.6em;
}
.brand-list strong{font-family:"Sora",sans-serif;}

/* Tables — stacked on mobile */
.table-wrap{margin:0 0 1.8em;}
table.spec-table{
  width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;
  font-size:.93rem;
}
table.spec-table caption{
  text-align:left;font-weight:700;font-family:"Sora",sans-serif;padding:12px 16px;
  background:var(--surface-alt);border-bottom:1px solid var(--border);
}
table.spec-table th,table.spec-table td{
  text-align:left;padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:top;
}
table.spec-table thead th{
  background:var(--header-1);color:#eceafb;font-family:"Sora",sans-serif;font-weight:600;font-size:.85rem;
}
table.spec-table tbody tr:last-child td{border-bottom:none;}
table.spec-table tbody tr:nth-child(even){background:var(--surface-alt);}
table.spec-table td.k{font-weight:600;color:var(--text);width:38%;}

@media (max-width:700px){
  table.spec-table thead{display:none;}
  table.spec-table, table.spec-table tbody, table.spec-table tr, table.spec-table td{display:block;width:100%;}
  table.spec-table tr{border-bottom:1px solid var(--border);padding:8px 0;}
  table.spec-table tbody tr:nth-child(even){background:none;}
  table.spec-table td{border-bottom:none;padding:4px 16px;}
  table.spec-table td[data-label]::before{
    content:attr(data-label);display:block;font-size:.72rem;text-transform:uppercase;
    letter-spacing:.05em;color:var(--text-muted);font-weight:700;margin-bottom:2px;
  }
  table.spec-table td.k{width:auto;}
  table.spec-table td.k::before{content:none;}
}

/* Feature list + pros/cons */
.feature-list{margin:0 0 1.4em;padding-left:0;list-style:none;display:grid;gap:8px;}
.feature-list li{
  padding-left:28px;position:relative;font-size:.96rem;
}
.feature-list li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--emerald);font-weight:800;
}
.pros-cons{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 1.8em;
}
@media (max-width:600px){.pros-cons{grid-template-columns:1fr;}}
.pros-cons .box{border-radius:var(--radius-md);padding:14px 16px;border:1px solid var(--border);}
.pros-cons .pro{background:rgba(15,157,99,.06);border-color:rgba(15,157,99,.3);}
.pros-cons .con{background:rgba(234,106,31,.06);border-color:rgba(234,106,31,.3);}
.pros-cons h4{margin:0 0 8px;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;}
.pros-cons .pro h4{color:var(--emerald);}
.pros-cons .con h4{color:var(--accent-2);}
.pros-cons ul{margin:0;padding-left:18px;font-size:.9rem;color:var(--text-muted);}
.pros-cons li{margin-bottom:4px;}

.author-box{
  display:flex;gap:16px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin:2.4em 0;
  box-shadow:var(--shadow-soft);
}
.author-box img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;}
.author-box h3{margin:0 0 4px;}
.author-box p{margin:0;color:var(--text-muted);font-size:.92rem;}

/* Disclaimer / footer */
.disclaimer{
  background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:14px 18px;font-size:.82rem;color:var(--text-muted);margin:2em 0;
}
.site-footer{
  background:var(--header-1);color:#c7cbe0;padding:38px 0;margin-top:40px;font-size:.85rem;
}
.site-footer a{color:#e9e7fb;}
.site-footer .foot-links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px;}
.site-footer p{color:#9296b3;}

/* CTA link used inline in copy */
.inline-cta{
  display:inline-block;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:var(--accent-text);font-weight:700;padding:9px 18px;border-radius:999px;text-decoration:none;font-size:.92rem;
}