/* ===============================
   GLOBAL RESET
=============================== */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#ffffff;
  color:#111;
  line-height:1.6;
}


/* ===============================
   LAYOUT
=============================== */

.container{
  max-width:900px;
  margin:auto;
  padding:24px;
}

header{
  border-bottom:1px solid #eee;
  margin-bottom:30px;
}

footer{
  border-top:1px solid #eee;
  margin-top:40px;
  font-size:14px;
  color:#555;
}


/* ===============================
   TYPOGRAPHY
=============================== */

h1{
  font-size:2rem;
  margin-bottom:10px;
}

h2{
  font-size:1.3rem;
  margin-bottom:6px;
}

.subtitle{
  color:#666;
  margin-bottom:24px;
}


/* ===============================
   GRID
=============================== */

.device-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-top:20px;
}

.grid,
.intent-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-top:20px;
}

.device-card{
  display:block;
  border:1px solid #eee;
  border-radius:12px;
  padding:18px;
  text-decoration:none;
  color:inherit;
  transition:.15s;
  background:#fafafa;
}

.device-card:hover{
  border-color:#000;
  transform:translateY(-2px);
}


/* ===============================
   BUTTONS
=============================== */

.primary-btn{
  background:#000;
  color:#fff;
  border:none;
  padding:16px 26px;
  border-radius:10px;
  font-size:16px;
  cursor:pointer;
  transition:.15s;
}

.primary-btn:hover{
  background:#222;
}

.secondary-btn{
  background:#fff;
  color:#111;
  border:1px solid #111;
  padding:16px 26px;
  border-radius:10px;
  font-size:16px;
  cursor:pointer;
  transition:.15s;
}

.secondary-btn:hover{
  background:#f2f2f2;
}

.cta-box{
  margin:30px 0;
}

.info ul,
.related ul,
.quick ul{
  padding-left:20px;
}

.info li,
.related li,
.quick li{
  margin-bottom:8px;
}

.related,
.back,
.quick,
.how,
.categories,
.trust{
  margin-top:28px;
}

.categories a,
.related a{
  font-weight:600;
}


/* ===============================
   TRUST / DISCLAIMER
=============================== */

.disclaimer,
.trust-block{
  margin-top:30px;
  font-size:14px;
  color:#666;
}


/* ===============================
   LINKS
=============================== */

a{
  color:#000;
}

nav a{
  margin-right:16px;
  text-decoration:none;
  font-size:14px;
}

nav a:hover{
  text-decoration:underline;
}