/* ── Site Variables ── */
:root {
  --accent: #19212B;
  --accent-light: #2d3a4a;
  --text: #1a1a1a;
  --text-muted: #666;
  --bg: #ffffff;
  --bg-soft: #f8f8f8;
  --border: #e8e8e8;
  --max-width: 1100px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ── */
.site-header {
  background: var(--accent);
  color: #fff;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.site-header .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.site-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.5px;
}
.site-logo:hover { text-decoration: none; opacity: .9; }
.site-nav { display: flex; gap: 1.5rem; align-items: center; }
.site-nav a { color: rgba(255,255,255,.85); font-size: .9rem; font-weight: 500; }
.site-nav a:hover { color: #fff; text-decoration: none; }

/* ── Hero banner (index page) ── */
.site-hero {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding: 3rem 1.5rem;
  text-align: center;
}
.site-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: .5rem; }
.site-hero p { color: var(--text-muted); max-width: 600px; margin: 0 auto; font-size: 1.05rem; }

/* ── Main content wrapper ── */
.site-main {
  max-width: var(--max-width);
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}

/* ── Article grid (index) ── */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.article-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  transition: box-shadow .2s, transform .2s;
}
.article-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.article-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.article-card-body { padding: 1.25rem; }
.article-card-body h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .5rem;
  line-height: 1.4;
}
.article-card-body h2 a { color: var(--text); }
.article-card-body h2 a:hover { color: var(--accent); text-decoration: none; }
.article-card-body p {
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-meta { font-size: .8rem; color: var(--text-muted); margin-bottom: .75rem; }
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: .5rem 1.1rem;
  border-radius: 4px;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.btn:hover { background: var(--accent-light); text-decoration: none; }

/* ── Pagination ── */
.pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 3rem;
}
.pagination a, .pagination span {
  padding: .5rem .9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .9rem;
  color: var(--accent);
}
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Affiliate disclosure banner ── */
.disclosure-banner {
  background: #fffbea;
  border: 1px solid #f0d060;
  border-radius: 6px;
  padding: .75rem 1rem;
  font-size: .85rem;
  color: #7a6000;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.disclosure-banner a { color: #5a4400; font-weight: 600; }

/* ── Article page ── */
.article-hero-img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 2rem;
}
.article-header { margin-bottom: 1.5rem; }
.article-header h1 { font-size: 2rem; font-weight: 800; line-height: 1.25; margin-bottom: .5rem; }
.article-meta { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }
.article-body { max-width: 860px; }
.article-body p { margin-bottom: 1.25rem; font-size: 1.05rem; line-height: 1.75; }
.article-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; }
.article-body h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.article-body ul, .article-body ol { margin: 0 0 1.25rem 1.5rem; }
.article-body li { margin-bottom: .4rem; font-size: 1.05rem; }
.toc-box {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.toc-box h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .75rem; }
.toc-box ul { margin-left: 1rem; }
.toc-box li { font-size: .95rem; margin-bottom: .3rem; }

/* ── Black Tie styles (embedded in articles) ── */
.btie-style-short a,.btie-style-reviews a{box-shadow:none!important;color:black!important}.btie-style-short a:hover,.btie-style-reviews a:hover{box-shadow:none!important;color:black!important}.btie-style-short{counter-reset:totalReview;max-width:850px;border:none}.btie-style-short h2{text-transform:uppercase;margin-bottom:50px}.btie-style-short:after{border-bottom:1px solid #E9E9E9;content:"";width:100%;display:block}table.btie-style-short{border-collapse:collapse;width:100%;height:100%}.btie-style-short tbody{height:100%}.btie-style-short tr{background-color:#FFF;margin-bottom:40px;display:grid!important;position:relative;grid-template-columns:1fr minmax(0,2fr) 1fr;column-gap:10px;row-gap:2px;padding:50px 25px 25px;box-shadow:0 15px 40px rgb(166 172 201/.2);border-radius:5px;place-items:start start;counter-increment:totalReview}.btie-style-short tr td{border:none}.btie-style-short .toc-img{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:10;align-self:center;padding-right:15px;line-height:0}.btie-style-short .toc-img a{display:block}.btie-style-short .toc-img img{object-fit:cover;width:100%;max-width:185px;max-height:185px;margin-top:15px;margin-bottom:15px}.btie-style-short .toc-det{grid-column-start:2;grid-column-end:4;grid-row-start:1;grid-row-end:2;font-size:24px;line-height:24px;font-weight:700;place-self:start start;width:100%}.btie-style-short .toc-det a{text-decoration:none!important;color:black;box-shadow:none}.btie-style-short .toc-det a:hover{text-decoration:underline!important;text-decoration-color:black!important;box-shadow:none}.btie-style-short .toc-tag{position:absolute;top:-14px;left:-12px;display:inline-block;background-color:#19212B;color:#FFF;z-index:500;font-weight:700;padding:11px 20px;font-size:16px;line-height:19px;text-transform:uppercase;box-shadow:2px 2px 2px 0 rgb(0 0 0/.14);width:auto;text-align:left}.btie-style-short .toc-tag::after{content:" ";display:block;position:absolute;left:-10px;bottom:-8px;border-color:#fff0 rgb(25 33 43/.40) #fff0 #fff0;border-style:inset solid inset inset;border-width:0 12px 8px 10px;filter:brightness(50%);z-index:1}.btie-style-short td.toc-pro1::before,.btie-style-short td.toc-pro2::before,.btie-style-short td.toc-pro3::before{content:'\2713';font-size:12px;color:#19212B;margin-right:5px;display:inline-block;width:16px;text-align:center;font-weight:700}.btie-style-short .toc-pro1,.btie-style-short .toc-pro2,.btie-style-short .toc-pro3{font-size:16px;line-height:22px;padding:0;padding-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;width:100%}.btie-style-short .toc-pro1{grid-column-start:2;grid-column-end:3;grid-row-start:4;grid-row-end:5;align-self:start}.btie-style-short .toc-pro2{grid-column-start:2;grid-column-end:3;grid-row-start:5;grid-row-end:6;align-self:start}.btie-style-short .toc-pro3{grid-column-start:2;grid-column-end:3;grid-row-start:6;grid-row-end:7;align-self:start}.btie-style-short .toc-but{grid-column-start:3;grid-column-end:4;grid-row-start:4;grid-row-end:6;display:flex;align-self:center;justify-self:center;text-align:center;padding:10px 20px;font-size:15px;line-height:22px;text-transform:uppercase;font-weight:700;border-radius:5px;color:#FAF9F9;background-color:#19212B;box-shadow:0 15px 40px rgb(166 172 201/.2)}.btie-style-short .toc-but a{color:#FFF!important;text-decoration:none;box-shadow:none;align-self:center}.btie-style-short .toc-rev{grid-column-start:3;grid-column-end:4;grid-row-start:6;grid-row-end:7;align-self:start;justify-self:center;font-size:15px;text-decoration:underline;padding-left:0;padding-right:0;text-align:center;line-height:20px}
.btie-style-reviews-pre{text-transform:uppercase;letter-spacing:-1px;font-size:38px;font-weight:700;display:block;margin-top:50px;margin-bottom:0;text-align:center;line-height:36px}ol.btie-style-reviews{width:100%;list-style-position:inside;padding-left:0;list-style-type:none;counter-reset:currentReview;margin-left:0;margin-right:0}.btie-style-reviews>li{margin-bottom:25px;display:flex;flex-direction:column}.btie-style-reviews h2{font-size:35px;margin-bottom:0;margin-top:25px;width:auto;background:#FFF;padding:35px 25px 0;text-align:center;position:relative;box-shadow:0 -25px 10px -4px rgb(166 172 201/.056);z-index:1;border-radius:3px 3px 0 0}.btie-style-reviews h2:before{position:absolute;top:-14px;left:-12px;display:inline-block;background-color:#19212B;color:#FAF9F9;z-index:500;font-weight:700;padding:14px;font-size:16px;line-height:12px;text-transform:uppercase;box-shadow:2px 2px 2px 0 rgb(0 0 0/.14);width:auto;text-align:left;content:counter(currentReview)" / "counter(totalReview)" ";counter-increment:currentReview}.btie-style-box{background-color:#FFF;margin-bottom:15px;display:grid;position:relative;grid-template-columns:1fr 1fr;column-gap:25px;row-gap:25px;padding:25px;box-shadow:0 25px 10px -4px rgb(166 172 201/.056);place-items:center center;z-index:1;border-radius:0 0 3px 3px}.btie-style-box-image{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;width:100%;text-align:center}.btie-style-box-image img{max-width:200px;width:100%}.btie-style-box img{max-width:200px;max-height:200px}.btie-style-box:after{border-right:1px solid #19212C;content:" ";height:75%;position:absolute;margin-left:50%;margin-right:50%}.btie-style-box p{grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:2;place-items:center center;font-weight:600;font-size:35px;line-height:38px;text-transform:uppercase;padding:0;margin:0;letter-spacing:-1px;text-align:center}.btie-style-box p:before{content:"Our Verdict:";display:block;font-size:20px}a.btie-style-box-button{grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3;place-items:center center;text-align:center;padding:12px 15px;font-size:18px;line-height:22px;text-transform:uppercase;border-radius:5px;font-weight:700;min-width:212px;color:#FAF9F9!important;background-color:#19212B;box-shadow:0 15px 40px rgb(166 172 201/.2);text-decoration:none}a.btie-style-box-button:hover,a.btie-style-box-button:active{text-decoration:underline!important;text-decoration-color:#FAF9F9;color:#FFF!important;transform:matrix(1.02,0,0,1.02,0,0);box-shadow:0 20px 35px rgb(160 164 183/.417)}

/* ── Legal pages ── */
.legal-page { max-width: 800px; }
.legal-page h1 { font-size: 1.8rem; margin-bottom: 1.5rem; }
.legal-page h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }
.legal-page p, .legal-page li { font-size: 1rem; margin-bottom: .75rem; color: #333; }
.legal-page ul { margin-left: 1.5rem; margin-bottom: 1rem; }
.legal-page .last-updated { color: var(--text-muted); font-size: .85rem; margin-bottom: 2rem; }

/* ── About page ── */
.about-page { max-width: 800px; }
.about-page h1 { font-size: 1.8rem; margin-bottom: 1rem; }
.about-page p { font-size: 1.05rem; margin-bottom: 1.25rem; line-height: 1.75; }

/* ── Footer ── */
.site-footer {
  background: var(--accent);
  color: rgba(255,255,255,.75);
  margin-top: 4rem;
  padding: 2.5rem 1.5rem;
}
.site-footer .inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin-bottom: 1rem;
}
.footer-links a { color: rgba(255,255,255,.75); font-size: .85rem; }
.footer-links a:hover { color: #fff; text-decoration: none; }
.footer-disclosure {
  font-size: .8rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 1rem;
  margin-top: 1rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .site-hero h1 { font-size: 1.5rem; }
  .article-grid { grid-template-columns: 1fr; }
  .article-header h1 { font-size: 1.5rem; }
  .site-nav { gap: 1rem; }
}
@media (max-width: 500px) {
  .site-nav a:not(:first-child) { display: none; }
  .site-nav a:first-child { display: inline; }
}