
:root{--ink:#0c1a2e;--ink-mid:#152840;--teal:#0d6b6b;--teal-mid:#1a8a8a;--teal-light:#e4f4f4;--sand:#c8a86a;--sand-pale:#fdf8ee;--coral:#c85a4a;--coral-light:#fdecea;--sage:#4a7a5a;--sage-light:#e8f4ec;--cream:#f8f5f0;--text:#1a1a2a;--text-mid:#4a4a6a;--text-muted:#8a8aaa;--border:#e0d8cc;--shadow:0 4px 20px rgba(10,22,40,.08)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-size:1.125rem;font-family: 'Inter', sans-serif;background:var(--cream);color:var(--text);line-height:1.75;-webkit-font-smoothing:antialiaseda{color:inherit;text-decoration:none}
.disclosure{background:#fffbf0;border-bottom:1px solid #e8d8a0;padding:.5rem 1.5rem;text-align:center;font-size:.95rem;color:#7a5c10}
.site-header{background:var(--ink);padding:.9rem 2rem;position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(0,0,0,.3)}
.header-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{font-family: 'Lora', serif;font-size:1.05rem;font-weight:700;color:var(--sand)}
.back-link{font-size:.9rem;color:rgba(255,255,255,.45)}.back-link:hover{color:var(--sand)}
.page-hero{background:linear-gradient(135deg,var(--ink) 0%,var(--teal) 100%);padding:3.5rem 2rem;text-align:center}
.hero-inner{max-width:700px;margin:0 auto}
.hero-tag{display:inline-flex;align-items:center;gap:.4rem;background:rgba(200,168,106,.15);border:1px solid rgba(200,168,106,.3);color:var(--sand);font-size:.80rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:.3rem .9rem;border-radius:2rem;margin-bottom:1.2rem}
.page-title{font-family: 'Lora', serif;font-size:clamp(1.8rem,4vw,2.7rem);font-weight:700;color:white;line-height:1.2;margin-bottom:.9rem}
.page-title em{color:var(--sand);font-style:italic}
.page-desc{font-size:.92rem;color:rgba(255,255,255,.6);max-width:560px;margin:0 auto 1.5rem}
.author-strip{display:inline-flex;align-items:center;gap:.8rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:3rem;padding:.5rem 1.1rem .5rem .5rem}
.author-avatar{width:2.2rem;height:2.2rem;border-radius:50%;background:linear-gradient(135deg,var(--teal) 0%,var(--sand) 100%);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.author-name{font-size:.92rem;font-weight:600;color:white}
.author-bio{font-size:.90rem;color:rgba(255,255,255,.4)}
.page-body{max-width:960px;margin:0 auto;padding:2.5rem 2rem}
.intro-box{background:white;border:1px solid var(--border);border-radius:12px;padding:1.4rem;margin-bottom:2.5rem;box-shadow:var(--shadow)}
.intro-box p{font-family: 'Inter', sans-serif;font-size:1.125rem;color:var(--text);line-height:1.8;margin-bottom:.8rem}
.intro-box p:last-child{margin-bottom:0}
.rank-card{background:white;border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:2rem;box-shadow:var(--shadow);transition:box-shadow .25s,transform .25s}
.rank-card:hover{box-shadow:0 12px 40px rgba(10,22,40,.14);transform:translateY(-2px)}
.rank-header{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;padding:1.4rem;background:linear-gradient(135deg,var(--ink) 0%,var(--ink-mid) 100%)}
.rank-num{width:2.8rem;height:2.8rem;border-radius:50%;font-family: 'Lora', serif;font-size:1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.n1{background:var(--sand);color:var(--ink)}
.n2{background:#b0b8c8;color:var(--ink)}
.n3{background:#c8906a;color:var(--ink)}
.n4,.n5{background:#7080a8;color:white}
.rank-name{font-family: 'Lora', serif;font-size:1.15rem;font-weight:700;color:white;line-height:1.2}
.rank-niche{font-size:.80rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:1px;margin-top:.2rem}
.rank-stars{color:var(--sand);font-size:.95rem;letter-spacing:2px;margin-top:.3rem}
.rank-badge{background:rgba(200,168,106,.18);border:1px solid rgba(200,168,106,.35);color:var(--sand);font-size:.87rem;font-weight:700;padding:.22rem .62rem;border-radius:2rem;white-space:nowrap;align-self:flex-start}
.rank-body{padding:1.4rem}
.rank-body p{font-family: 'Inter', sans-serif;font-size:1.125rem;color:var(--text);line-height:1.8;margin-bottom:.8rem}
.rank-highlights{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0}
.ht{background:var(--teal-light);color:var(--teal);font-size:.82rem;font-weight:600;padding:.22rem .65rem;border-radius:2rem}
.ht.amber{background:var(--sand-pale);color:#7a4010}
.ht.coral{background:var(--coral-light);color:var(--coral)}
.rank-verdict{background:var(--sand-pale);border-left:3px solid var(--sand);border-radius:0 8px 8px 0;padding:.65rem .95rem;font-size:.95rem;color:#7a5c10;font-style:italic;margin:.8rem 0}
.rank-verdict strong{font-style:normal;color:#5a3d00}
.rank-footer{display:flex;gap:.7rem;padding:0 1.4rem 1.4rem}
.btn-r{flex:1;background:var(--ink);color:white;border:none;border-radius:8px;padding:.68rem;font-size:.95rem;font-weight:600;text-align:center;transition:background .2s;display:block;font-family: 'Inter', sans-serif}
.btn-r:hover{background:var(--ink-mid)}
.btn-b{background:var(--teal);color:white;border:none;border-radius:8px;padding:.68rem 1.1rem;font-size:.92rem;font-weight:700;text-align:center;transition:background .2s;display:block;white-space:nowrap;font-family: 'Inter', sans-serif}
.btn-b:hover{background:var(--teal-mid)}
.compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.compare-table{width:100%;min-width:560px;border-collapse:collapse;font-size:.93rem;margin:2rem 0}
.compare-table th{background:var(--ink);color:var(--sand);padding:.65rem .85rem;text-align:left;font-size:.82rem;letter-spacing:.5px;text-transform:uppercase}
.compare-table td{padding:.62rem .85rem;border-bottom:1px solid var(--border);vertical-align:middle}
.compare-table tr:nth-child(even) td{background:#fafaf8}
.compare-table tr:first-child td{background:var(--sand-pale) !important;font-weight:600}
.compare-table td:first-child{display:flex;align-items:center;gap:.6rem}
.compare-thumb{width:36px;height:36px;object-fit:contain;border-radius:6px;background:#f8f5f0;flex-shrink:0}
.compare-thumb-icon{width:36px;height:36px;border-radius:6px;background:#f8f5f0;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.chk{color:var(--sage);font-weight:700}
.site-footer{background:var(--ink);color:rgba(255,255,255,.28);text-align:center;padding:1.4rem;font-size:.82rem;margin-top:3rem}
.site-footer a{color:rgba(255,255,255,.38)}
@media(max-width:768px){.page-body{padding:1.5rem 1.2rem}.rank-header{grid-template-columns:auto 1fr}.rank-badge{display:none}.rank-footer{flex-direction:column}}

  .optin-text { margin-bottom: 16px; }
  .optin-form { width: 100%; }
  .ml-block-form { width: 100%; }
  .optin-success-inner { text-align: center; padding: 20px; }



.optin-section { background: var(--ink); padding: 60px 40px; }
.optin-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 700px) { .optin-inner { grid-template-columns: 1fr; gap: 28px; } .optin-section { padding: 40px 20px; } }
.optin-tag { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sand); margin-bottom: 10px; }
.optin-title { font-family: 'Lora', serif; font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: #fff; margin-bottom: 12px; line-height: 1.3; }
.optin-sub { font-size: .92rem; color: rgba(255,255,255,.75); line-height: 1.65; margin-bottom: 16px; }
.optin-bullets { list-style: none; padding: 0; }
.optin-bullets li { font-size: .88rem; color: rgba(255,255,255,.8); margin-bottom: 8px; }
.optin-form-wrap { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 28px; }
.optin-field-row { display: flex; flex-direction: column; gap: 10px; }
.optin-email-input { width: 100%; padding: 13px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font-size: .95rem; font-family: 'Inter', sans-serif; box-sizing: border-box; }
.optin-email-input::placeholder { color: rgba(255,255,255,.5); }
.optin-email-input:focus { outline: none; border-color: var(--sand); background: rgba(255,255,255,.15); }
.optin-btn { width: 100%; padding: 14px; background: var(--sand); color: var(--ink); border: none; border-radius: 8px; font-weight: 700; font-size: .95rem; cursor: pointer; font-family: 'Inter', sans-serif; transition: background .2s; }
.optin-btn:hover { background: #f0d98a; }
.optin-disclaimer { font-size: .75rem; color: rgba(255,255,255,.45); margin-top: 12px; line-height: 1.5; }
.optin-disclaimer a { color: var(--sand); }
.optin-success { text-align: center; padding: 20px; }
.optin-success-icon { font-size: 2.5rem; margin-bottom: 12px; }
.optin-success h3 { color: var(--sand); font-size: 1.3rem; margin-bottom: 8px; }
.optin-success p { color: rgba(255,255,255,.8); font-size: .9rem; }


.related-reviews{background:#f8f5f0;border-top:2px solid #e0d8cc;padding:2.5rem 2rem;margin-top:3rem}
.related-reviews h3{font-family: 'Lora', serif;font-size:1.1rem;color:#0c1a2e;margin-bottom:1.2rem;font-weight:700}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem;max-width:900px}
.related-card{background:#fff;border:1px solid #e0d8cc;border-radius:10px;padding:.9rem 1.1rem;text-decoration:none;color:#0c1a2e;font-size:.85rem;font-weight:600;transition:box-shadow .2s,border-color .2s;display:flex;align-items:center;gap:.5rem}
.related-card:hover{box-shadow:0 4px 16px rgba(10,22,40,.1);border-color:#0d6b6b;color:#0d6b6b}
.related-card::before{content:"→";color:#0d6b6b;flex-shrink:0}

  /* ── OPTIN SUCCESS FIX ── */
  .optin-success-inner { color: #fff; }
  .optin-success-inner h3 { color: #fff; font-size: 1.2rem; margin-bottom: 8px; }
  .optin-success-inner p { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
