body{
  font-family: Arial, sans-serif;
  margin:0;
  background:#F8FAFC;
  color:#0F172A;
  line-height:1.6;
}

.container{
  max-width:1100px;
  margin:auto;
  padding:20px;
}

/* ===== STICKY HEADER CLEAN ===== */

.sticky{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  z-index:1000;
}

.sticky .nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
}

.brand{
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  color:#111827;
  line-height:1;
}

.brand span{
  color:#2563eb;
}

.cta-sticky{
  background:#2563eb;
  color:#fff;
  padding:8px 14px;
  border-radius:6px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  line-height:1;
}

.hero {
  text-align: center;
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  background-color: #eef2f7;
  background-image:
    radial-gradient(circle at 75% 20%, rgba(16, 49, 120, 0.10) 0, rgba(16, 49, 120, 0.10) 2px, transparent 2px),
    radial-gradient(circle at 75% 20%, transparent 0, transparent 140px, rgba(16, 49, 120, 0.09) 141px, transparent 143px),
    radial-gradient(circle at 75% 20%, transparent 0, transparent 260px, rgba(16, 49, 120, 0.08) 261px, transparent 263px),
    radial-gradient(circle at 75% 20%, transparent 0, transparent 380px, rgba(16, 49, 120, 0.07) 381px, transparent 383px);
}

.hero::after {
  content: "";
  position: absolute;
  left: 75%;
  top: 20%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Ccircle cx='20' cy='18' r='4' fill='%23103178'/%3E%3Ccircle cx='34' cy='14' r='4' fill='%23103178'/%3E%3Ccircle cx='46' cy='22' r='4' fill='%23103178'/%3E%3Ccircle cx='18' cy='34' r='4' fill='%23103178'/%3E%3Ccircle cx='32' cy='30' r='4' fill='%23103178'/%3E%3Ccircle cx='46' cy='36' r='4' fill='%23103178'/%3E%3Ccircle cx='28' cy='46' r='4' fill='%23103178'/%3E%3Cline x1='20' y1='18' x2='34' y2='14' stroke='%23103178' stroke-width='1.5'/%3E%3Cline x1='34' y1='14' x2='46' y2='22' stroke='%23103178' stroke-width='1.5'/%3E%3Cline x1='20' y1='18' x2='18' y2='34' stroke='%23103178' stroke-width='1.5'/%3E%3Cline x1='18' y1='34' x2='32' y2='30' stroke='%23103178' stroke-width='1.5'/%3E%3Cline x1='32' y1='30' x2='46' y2='36' stroke='%23103178' stroke-width='1.5'/%3E%3Cline x1='32' y1='30' x2='28' y2='46' stroke='%23103178' stroke-width='1.5'/%3E%3Cline x1='46' y1='22' x2='46' y2='36' stroke='%23103178' stroke-width='1.5'/%3E%3C/svg%3E");
}

.hero .container {
  position: relative;
  z-index: 1;
}

.disclaimer-mini,
.updated {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.disclaimer-mini {
  margin-top: 14px;
  margin-bottom: 18px;
}

.disclaimer-mini .asterisk {
  font-weight: 700;
  margin-right: 2px;
}

.updated {
  margin-top: 18px;
}

.subtitle{font-size:16px;}

.top-pick-intro {
  width: 100%;
  background: #e8eff7;
  padding: 70px 0;
  border-top: 1px solid #103178;
  border-bottom: 1px solid #d6dfeb;
}

.cta, .cta-big{
  background:#0B5ED7;
  color:#fff;
  padding:14px 22px;
  border-radius:8px;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  margin-top:15px;
}

.cta-big:hover,
.cta:hover {
  transform: translateY(-2px);
  transition: 0.2s ease;
}

.product{
  background:#fff;
  padding:25px;
  margin:30px 0;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.highlight{
  border:3px solid #0B5ED7;
}

.badge{
  display:inline-block;
  background:#fde68a;
  color:#92400e;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.3px;
  margin-bottom:10px;
}

.product:first-of-type .badge{
  background:#facc15;
  color:#78350f;
}

.rating{
  font-size:22px;
  font-weight:bold;
}

.proof{
  color:#16a34a;
  font-weight:600;
  margin-bottom:10px;
}

.cta-main{
  font-size:18px;
  padding:16px 28px;
  background:#ff6b00;
}

.cta-main:hover{
  background:#e55a00;
}

.urgency{
  font-size:13px;
  color:#6b7280;
  margin-top:8px;
}

table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

th,td{
  padding:14px;
  border:1px solid #e5e7eb;
}

.table-wrap{
  overflow-x:auto;
}

th{
  background:#f5f7fa;
  font-weight:700;
}

.cta-small{
  background:#1E2A44;
  color:#fff;
  padding:8px 14px;
  text-decoration:none;
  border-radius:6px;
  font-weight:600;
  white-space:nowrap;
}

.comparison td:last-child{
  text-align:center;
  font-weight:600;
}

.cta-small:hover{
  background:#2B3A5C;
}

/* ===== PRO TABLE ===== */

.comparison{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  font-size:15px;
}

.comparison th{
  background:#f5f7fa;
  font-weight:700;
  text-align:left;
}

.comparison th,
.comparison td{
  padding:14px;
  border:1px solid #e5e7eb;
}

.comparison tbody tr:hover{
  background:#f9fafb;
}

/* ⭐ Highlight #1 */

.top-product{
  background:#fff8e1;
  font-weight:600;
}

.top-product td{
  border-color:#f4d03f;
}

/* 🔘 CTA Button */

.cta-small{
  background:#1E2A44;
  color:#fff;
  padding:8px 16px;
  text-decoration:none;
  border-radius:8px;
  font-weight:700;
  display:inline-block;
  white-space:nowrap;
  transition:0.2s ease;
}

.cta-small:hover{
  background:#2B3A5C;
  transform:translateY(-1px);
}

/* 📱 Mobile improvements */

.table-wrap {
  overflow-x: auto;
}

@media (max-width: 600px) {

  .comparison {
    font-size: 14px;
  }

  .comparison th:first-child,
  .comparison td:first-child {
    display: none;
  }

  .comparison th,
  .comparison td {
    padding: 10px;
  }

  .cta-small {
    font-size: 0;
    padding: 8px 8px;
    min-width: 36px;
    text-align: center;
  }

  .cta-small::after {
    content: "➜";
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  .comparison tbody tr:nth-child(1) td:nth-child(2)::before { content: "#1 "; font-weight: 700; color: #103178; }
  .comparison tbody tr:nth-child(2) td:nth-child(2)::before { content: "#2 "; font-weight: 700; color: #103178; }
  .comparison tbody tr:nth-child(3) td:nth-child(2)::before { content: "#3 "; font-weight: 700; color: #103178; }
  .comparison tbody tr:nth-child(4) td:nth-child(2)::before { content: "#4 "; font-weight: 700; color: #103178; }
  .comparison tbody tr:nth-child(5) td:nth-child(2)::before { content: "#5 "; font-weight: 700; color: #103178; }
  .comparison tbody tr:nth-child(6) td:nth-child(2)::before { content: "#6 "; font-weight: 700; color: #103178; }
  .comparison tbody tr:nth-child(7) td:nth-child(2)::before { content: "#7 "; font-weight: 700; color: #103178; }
  .comparison tbody tr:nth-child(8) td:nth-child(2)::before { content: "#8 "; font-weight: 700; color: #103178; }
  .comparison tbody tr:nth-child(9) td:nth-child(2)::before { content: "#9 "; font-weight: 700; color: #103178; }
  .comparison tbody tr:nth-child(10) td:nth-child(2)::before { content: "#10 "; font-weight: 700; color: #103178; }

}

.cta{
  cursor:pointer;
}

.cta-small{
  cursor:pointer;
}

.table-intro-box {
  background: #fff;
  padding: 25px;
  margin: 0 0 50px 0;
  margin: 30px 0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.table-intro {
  text-align: center;
  line-height: 1.7;
  margin: 0 0 50px 0;
  font-size: 16px;
  font-weight: 500;
}

.scroll-hint{
  display:block;
  margin-top:12px;
  text-align:center;
  font-size:16px;
  color:#1E2A44;
  text-decoration:none;
  font-weight:600;
  transition:0.2s ease;
}

.scroll-hint:hover{
  color:#2B3A5C;
  transform:translateY(1px);
}

.cta-note {
  font-size: 16px;
  line-height: 1.5;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8fafc;
  font-weight: 700;
}

.final-cta{
  max-width:700px;
  margin:0 auto 20px;
  text-align:center;
  line-height:1.6;
}

.final{
  text-align:center;
  padding:70px 0;
}

footer{
  background:#0F172A;
  color:#CBD5E1;
  text-align:center;
  padding:40px 0;
}

footer a{
  color:#E2E8F0;
  text-decoration:none;
}

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

footer p{
  max-width:800px;
  margin:0 auto 10px;
  line-height:1.6;
}

.footer-disclosure {
  margin-top:12px;
  font-size:14px;
  color:#94A3B8;
}

.footer-trust{
  margin-top:12px;
  font-size:14px;
  color:#94A3B8;
}

/* ===== TSS SLEEP VISUAL PATCH ===== */

/* Brand accent */
.brand span{
  color:#6B7AA1;
}

.cta-sticky{
  background:#1E2A44;
  border-radius:10px;
  transition:0.2s ease;
}

.cta-sticky:hover{
  background:#2B3A5C;
  transform:translateY(-1px);
}

/* Hero sleep mood */
.hero{
  background: linear-gradient(180deg, #F5F7FC 0%, #EEF2F7 100%);
  position:relative;
  overflow:hidden;
}

/* Remove brain circles / network icon */
.hero::after{
  display:none;
}

/* Soft moon glow */
.hero::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:8%;
  top:18%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(199,210,254,0.55) 0%, rgba(107,122,161,0.18) 45%, transparent 72%);
  filter:blur(12px);
  pointer-events:none;
  z-index:0;
}

/* Small stars */
.hero .container::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(107,122,161,0.45) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(107,122,161,0.35) 1px, transparent 1px);
  background-size:60px 60px, 90px 90px;
  background-position:20px 10px, 50px 40px;
  opacity:0.6;
  z-index:0;
}

/* Keep text above effects */
.hero .container{
  position:relative;
  z-index:1;
}

/* Buttons */
.cta,
.cta-big,
.cta-main{
  background:#1E2A44;
  border-radius:10px;
  transition:0.2s ease;
}

.cta:hover,
.cta-big:hover,
.cta-main:hover{
  background:#2B3A5C;
  transform:translateY(-2px);
}

/* Product cards softer shadow */
.product{
  box-shadow:0 8px 24px rgba(30,42,68,0.08);
}

/* Highlight top product */
.highlight{
  border:3px solid #6B7AA1;
}

/* CTA notes */
.cta-note{
  background:#F6F8FC;
  border:1px solid #E2E8F0;
}

/* Final section */
.final{
  background:linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%);
}

.hero-links{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:20px;
  margin-bottom:28px;
  flex-wrap:wrap;
}

.hero-links span{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:600;
}

.hero-links a{
  color:#1E2A44;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:0.2s ease;
}

.hero-links a:hover{
  border-bottom:1px solid #1E2A44;
}

html{
  scroll-behavior:smooth;
}

#deep-sleep,
#best-value,
#non-melatonin{
  scroll-margin-top:80px;
}

#sleep-supplements-comparison{
  scroll-margin-top:50px;
}

#top-sleep-supplement{
  scroll-margin-top:20px;
}