:root{--bg:#F1F5F9;--surface:#FFFFFF;--border:rgba(0,0,0,0.08);--text:#0F172A;--muted:#617188;--dim:#94A3B8;--accent:#1D4ED8;--cta:#1D4ED8;--cta-text:#fff;--r:8px;}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.6}
    a{color:var(--accent);text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;display:block}

    /* layout */
    .w{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
    .s{padding:64px 0}
    .s-alt{background:var(--surface)}

    /* age bar */
    .ab{background:var(--accent);color:var(--cta-text);text-align:center;font-size:12px;font-weight:600;padding:6px 16px;letter-spacing:.04em}

    /* nav */
    .nav{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--border);transition:box-shadow .2s}
    .nav.scrolled{box-shadow:0 2px 12px rgba(0,0,0,.3)}
    .nav-in{display:flex;align-items:center;gap:24px;height:60px}
    .nav-logo{font-size:18px;font-weight:700;color:var(--text);white-space:nowrap;margin-right:auto}
    .nav-links{display:flex;gap:20px}
    .nav-links a{font-size:14px;color:var(--muted);transition:color .15s}
    .nav-links a:hover{color:var(--text);text-decoration:none}
    .hbg{display:none;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;padding:4px}
    .mob-menu{display:none;flex-direction:column;gap:0;background:var(--surface);border-top:1px solid var(--border)}
    .mob-menu a{display:block;padding:14px 20px;font-size:15px;color:var(--text);border-bottom:1px solid var(--border)}

    /* buttons */
    .btn{display:inline-block;padding:10px 22px;border-radius:var(--r);font-weight:600;font-size:14px;cursor:pointer;transition:opacity .15s;border:none;text-align:center}
    .btn:hover{opacity:.85;text-decoration:none}
    .btn-p{background:var(--cta);color:var(--cta-text)}
    .btn-o{background:transparent;color:var(--accent);border:1px solid var(--accent)}
    .btn-sm{padding:7px 16px;font-size:13px}
    .btn-lg{padding:14px 32px;font-size:16px}

    /* hero */
    .hero{padding:80px 0 64px;text-align:center}
    .hero h1{font-size:clamp(28px,5vw,52px);font-weight:800;line-height:1.15;margin-bottom:20px;letter-spacing:-.02em}
    .hero p{font-size:18px;color:var(--muted);max-width:600px;margin:0 auto 32px}
    .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

    /* table */
    .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--border)}
    table{width:100%;border-collapse:collapse;font-size:14px}
    thead th{background:var(--surface);padding:12px 14px;text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border)}
    tbody tr{border-bottom:1px solid var(--border);transition:background .15s}
    tbody tr:last-child{border-bottom:none}
    tbody tr:hover{background:var(--dim)}
    tbody td{padding:14px;vertical-align:middle}
    .ni{display:inline-block;background:var(--dim);color:var(--accent);font-weight:700;font-size:13px;padding:3px 9px;border-radius:4px}
    .nl{display:flex;align-items:center;gap:10px}
    .nl-img{width:36px;height:36px;object-fit:contain;border-radius:4px}
    .lc{font-size:12px;font-weight:600;color:#4ade80}

    /* reviews */
    .rv{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:28px;margin-bottom:20px}
    .rv-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
    .rv-img{width:48px;height:48px;object-fit:contain;border-radius:6px}
    .rv-head h3{font-size:18px;font-weight:700;margin-bottom:4px}
    .rv-bonus{font-size:13px;color:var(--accent);font-weight:600}
    .rv-text{color:var(--muted);margin-bottom:20px;line-height:1.7}

    /* faq */
    .fq{border-bottom:1px solid var(--border)}
    .fq:first-child{border-top:1px solid var(--border)}
    .fq-q{width:100%;background:none;border:none;text-align:left;padding:18px 0;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
    .fq-ic{font-size:20px;color:var(--accent);flex-shrink:0;line-height:1}
    .fq-a{padding:0 0 18px}
    .fq-a p{color:var(--muted);line-height:1.7}

    /* footer */
    .ft{padding:40px 0;border-top:1px solid var(--border);text-align:center}
    .ft p{font-size:12px;color:var(--muted);max-width:640px;margin:0 auto 8px}

    /* section headings */
    .sh{font-size:clamp(22px,3vw,32px);font-weight:800;margin-bottom:8px;letter-spacing:-.02em}
    .sh-sub{color:var(--muted);margin-bottom:36px}

    /* logo monogram fallback — used when no verified brand logo exists,
       so a missing image never leaves an empty slot in a CTA row */
    .nl-img-mono,.rv-img-mono,.pk-img-mono{display:flex;align-items:center;justify-content:center;
      background:var(--accent);color:var(--cta-text);font-weight:800;border-radius:4px}
    .nl-img-mono{font-size:16px}
    .rv-img-mono{font-size:22px;border-radius:6px}
    .pk-img-mono{font-size:24px;border-radius:8px}

    /* hero trust strip */
    .trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:36px auto 0;max-width:720px}
    .trust li{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 18px;min-width:132px}
    .trust strong{display:block;font-size:19px;font-weight:800;color:var(--accent);line-height:1.2}
    .trust span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

    /* top-pick cards */
    .pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:24px}
    .pk{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center}
    .pk-badge{display:inline-block;background:var(--accent);color:var(--cta-text);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px;margin-bottom:16px}
    .pk-img{width:56px;height:56px;object-fit:contain;border-radius:8px;margin-bottom:12px}
    .pk h3{font-size:17px;font-weight:700;margin-bottom:6px}
    .pk-bonus{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:10px}
    .pk-note{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:18px;flex:1}

    /* rating pill in the comparison table */
    .rt{display:inline-block;background:var(--accent);color:var(--cta-text);font-weight:700;font-size:13px;padding:3px 9px;border-radius:4px}

    /* review internals */
    .rv-rate{margin-left:auto;text-align:right;line-height:1.1;white-space:nowrap}
    .rv-rate strong{font-size:26px;font-weight:800;color:var(--accent)}
    .rv-rate small{font-size:12px;color:var(--muted);margin-left:2px}
    .rv-sub{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:24px 0 12px}
    .rv-text + .rv-text{margin-top:-8px}
    .rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:4px}
    .sc-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
    .sc-lbl{flex:0 0 116px;color:var(--muted)}
    .sc-bar{flex:1;height:6px;background:var(--border);border-radius:999px;overflow:hidden}
    .sc-bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
    .sc-val{flex:0 0 26px;text-align:right;font-weight:700;font-size:12px}
    .pros,.cons{list-style:none;margin-bottom:10px}
    .pros li,.cons li{position:relative;padding-left:22px;margin-bottom:7px;font-size:13.5px;color:var(--muted);line-height:1.55}
    .pros li::before{content:"\2713";position:absolute;left:0;top:0;color:#16a34a;font-weight:700}
    .cons li::before{content:"\2715";position:absolute;left:0;top:0;color:#dc2626;font-weight:700}
    .tbl-sm table{font-size:13.5px}
    .kv th{text-align:left;font-weight:600;color:var(--muted);padding:10px 14px;width:44%;border-bottom:1px solid var(--border);vertical-align:top}
    .kv td{padding:10px 14px;border-bottom:1px solid var(--border)}
    .kv tr:last-child th,.kv tr:last-child td{border-bottom:none}
    .rv-verdict{background:var(--bg);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;padding:14px 16px;margin:22px 0;font-size:14px;color:var(--muted);line-height:1.6}
    .rv-verdict strong{color:var(--text)}

    /* how-to steps */
    .steps{list-style:none;counter-reset:none;margin-top:24px;display:grid;gap:14px}
    .st{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}
    .st-n{flex:0 0 30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--cta-text);font-weight:800;font-size:14px;border-radius:50%}
    .st h3{font-size:15px;font-weight:700;margin-bottom:4px}
    .st p{font-size:14px;color:var(--muted);line-height:1.6}

    /* long-form content — full-width container so headings line up with the
       section headings above, with the measure constrained on the text itself */
    .s-lead{padding-bottom:0}
    .ch{font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.02em;margin-bottom:14px;max-width:760px}
    .bd{color:var(--muted);line-height:1.75;margin-bottom:14px;max-width:760px}
    .bd:last-child{margin-bottom:0}
    .note{font-size:12.5px;color:var(--dim);margin-top:14px;line-height:1.6}

    /* responsive table → stacked cards at <=640px */
    @media(max-width:640px){
      .tbl-wrap{border:none}
      table thead{display:none}
      table,tbody,tr,td{display:block;width:100%}
      tbody tr{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:12px;padding:12px}
      tbody td{padding:6px 0;border:none;display:flex;justify-content:space-between;align-items:center;font-size:14px}
      tbody td::before{content:attr(data-label);font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
    }
    @media(max-width:768px){
      .nav-links,.nav .btn-sm{display:none}
      .hbg{display:block}
      .s{padding:44px 0}
    }
    @media(max-width:860px){
      .rv-grid{grid-template-columns:1fr;gap:0}
    }
    @media(max-width:480px){
      .hero{padding:48px 0 40px}
      .rv{padding:20px}
      .trust li{flex:1 1 calc(50% - 12px);min-width:0;padding:10px 12px}
      .rv-rate strong{font-size:21px}
      .sc-lbl{flex:0 0 96px}
      .kv th{width:50%}
    }