*,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
  body{position:relative;background:#c3d9ff;color:#1a1a2e}
  .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  .skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;padding:12px 18px;background:#1a1a2e;color:#fff;font-weight:700;font-size:14px;text-decoration:none;border-radius:6px;z-index:1000;box-shadow:0 4px 14px rgba(0,0,0,0.35);outline:2px solid #f59e0b;outline-offset:2px}
  body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='none'><rect width='60' height='30' fill='%23012169'/><path d='M0,0 L60,30 M60,0 L0,30' stroke='%23ffffff' stroke-width='6'/><path d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='2'/><path d='M30,0 v30 M0,15 h60' stroke='%23ffffff' stroke-width='10'/><path d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/></svg>");background-size:100% 100%;background-repeat:no-repeat;opacity:0.13;z-index:-1;pointer-events:none}
  .bg-header{background:#0c1c2b}
  .bg-nav{background:#1a1a2e}
  .gold{color:#d4af37}
  .green{color:#16a34a}
  table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid #9999cc;margin:14px 0}
  table th{text-align:left;padding:10px 12px;font-weight:700;background:#eef1f8;color:#1a1a2e;border-bottom:2px solid #9999cc;border-right:1px solid #d8dbe8}
  table td{padding:10px 12px;color:#374151;border-bottom:1px solid #e5e7eb;border-right:1px solid #eef0f5}
  table th:last-child,table td:last-child{border-right:none}
  table tr:last-child td{border-bottom:none}
  table .num{text-align:right;font-variant-numeric:tabular-nums}
  table .name{font-weight:700;color:#1a1a2e}
  table .pos{color:#16a34a;font-weight:700}
  table .neg{color:#b12627;font-weight:700}
  .review img.shot{width:100%;border-radius:6px;border:1px solid #9999cc;margin-bottom:18px;display:block}
  .review .head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
  .review .rank{background:#3266cc;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;padding:5px 13px;border-radius:14px;flex:none;line-height:1}
  .review h3{margin:0;font-size:20px;font-weight:700;color:#1a1a2e;flex:1;min-width:240px}
  .review .stars{position:relative;display:inline-block;font-size:14px;line-height:1;color:#d1d5db}
  .review .stars .inner{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:#d4af37}
  .review .ratenum{font-weight:700;color:#1a1a2e;font-size:14px;margin-left:4px}
  .pcgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
  .pros,.cons{padding:14px;border-radius:6px}
  .pros{background:#f0fdf4;border:1px solid #bbf7d0}
  .cons{background:#fef2f2;border:1px solid #fecaca}
  .pros p,.cons p{font-weight:700;font-size:13px;margin:0 0 8px}
  .pros p{color:#15803d}
  .cons p{color:#b91c1c}
  .pros ul,.cons ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5}
  .pros ul{color:#166534}
  .cons ul{color:#991b1b}
  .pros li,.cons li{margin-bottom:5px}
  .review .scoreline{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;font-size:13.5px;color:#374151;padding:12px 0;border-top:1px solid #e5e7eb;margin-top:14px}
  .review p{margin:0 0 12px;font-size:15px;line-height:1.65;color:#374151}
  .stat-block{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 18px;background:#f9fafb;padding:12px 14px;border-radius:6px;margin:14px 0;font-size:13.5px}
  .stat-block .lab{color:#6b7280;font-size:12px;display:block}
  .stat-block .val{font-weight:700;color:#1a1a2e}
  .cta{display:inline-block;padding:14px 28px;background:#b12627;color:#fff;font-weight:700;font-size:16px;border-radius:6px;text-decoration:none;text-align:center}
  .cta:hover{background:#8f1f20}
  .cta-row{text-align:center;margin-top:14px;padding-top:14px;border-top:1px solid #e5e7eb}
  h1{font-size:30px;line-height:1.2;font-weight:800;color:#1a1a2e;margin:0 0 14px}
  h2{font-size:24px;line-height:1.25;font-weight:700;color:#1a1a2e;margin:0 0 16px}
  h4{font-size:15px;font-weight:700;color:#1a1a2e;margin:14px 0 6px}
  .card{background:#fff;border:1px solid #9999cc;border-radius:6px;padding:20px;margin-bottom:20px}
  @media(min-width:768px){.card{padding:28px}}
  .byline-card{display:flex;align-items:center;gap:16px;background:#dbe7f5;border:1px solid #9999cc;border-radius:8px;padding:14px 16px;margin-bottom:18px;color:inherit;text-decoration:none;transition:background 0.15s,border-color 0.15s}
  a.byline-card:hover{background:#cfdcec;border-color:#3266cc}
  .byline-card img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid #3266cc;flex:none;background:#fff}
  .byline-card .nm{font-weight:700;color:#1a1a2e;font-size:15px;text-shadow:0 1px 0 rgba(255,255,255,0.6)}
  .byline-card .meta{font-size:12px;color:#3f4a5e;margin-top:2px}
  .byline-card .meta a{color:#3266cc}
  ol,ul{margin:0 0 14px;padding-left:22px;color:#374151;line-height:1.65;font-size:15px}
  ol li,ul li{margin-bottom:6px}
  p{margin:0 0 14px;font-size:15px;line-height:1.65;color:#374151}
  p strong{color:#1a1a2e}
  .container{max-width:1280px;margin:0 auto;padding:24px 16px 60px}
  .intro-text .show-more{display:none}
  @media(max-width:760px){
    .intro-text.js-collapsed .intro-more{display:none}
    .intro-text.js-collapsed .show-more{display:inline-flex;align-items:center;gap:6px;background:#dbe7f5;border:1px solid #9999cc;color:#1a4799;font-weight:700;font-size:14px;padding:8px 14px;border-radius:6px;cursor:pointer;margin-top:6px;font-family:inherit}
    .intro-text.js-collapsed .show-more:hover{background:#cfdcec}
    .intro-text.js-collapsed.expanded .intro-more{display:block}
    .intro-text.js-collapsed.expanded .show-more{display:none}
    .intro-text.js-collapsed .intro-lead{margin-bottom:6px}
    .card table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .card table th,.card table td{white-space:nowrap}
    .card table td.name,.card table th{white-space:normal}
  }
  @media(max-width:680px){
    .pcgrid{grid-template-columns:1fr}
    h1{font-size:22px;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;margin:0 0 10px}
    h2{font-size:20px}
    .review h3{font-size:18px}
    .byline-card{gap:12px;padding:10px 12px;margin-bottom:14px}
    .byline-card img{width:56px;height:56px;border-width:2px}
    .byline-card .nm{font-size:14px;line-height:1.3}
    .byline-card .meta{font-size:11px;line-height:1.35;margin-top:1px}
  }
  @media(max-width:380px){
    h1{font-size:20px}
    .byline-card img{width:48px;height:48px}
  }
  nav.primary{position:relative}
  nav.primary > ul{list-style:none;margin:0;padding:0;display:flex;align-items:center}
  nav.primary > ul > li{position:relative}
  nav.primary > ul > li > a{color:#fff;font-weight:600;padding:14px 18px;display:block;text-decoration:none;font-size:14px;letter-spacing:0.2px;border-radius:4px}
  nav.primary > ul > li > a:hover,nav.primary > ul > li > a.active{background:rgba(255,255,255,0.12)}
  nav.primary li.has-dropdown{display:flex;flex-wrap:wrap;align-items:center}
  nav.primary li.has-dropdown > a{flex:0 0 auto}
  nav.primary .dd-toggle{background:transparent;border:0;color:#fff;cursor:pointer;padding:6px 8px;font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:background 0.15s,transform 0.2s}
  nav.primary .dd-toggle:hover{background:rgba(255,255,255,0.18)}
  nav.primary li.has-dropdown.open .dd-toggle{transform:rotate(180deg)}
  nav.primary .dropdown{position:absolute;top:100%;left:0;list-style:none;margin:0;padding:6px 0;background:#15273b;border-radius:6px;min-width:200px;box-shadow:0 6px 18px rgba(0,0,0,0.22);display:none;z-index:50;border:1px solid rgba(255,255,255,0.18)}
  nav.primary li.has-dropdown:hover .dropdown,nav.primary li.has-dropdown:focus-within .dropdown{display:block}
  nav.primary .dropdown a{color:#fff;text-decoration:none;display:block;padding:9px 16px;font-size:13.5px;font-weight:500}
  nav.primary .dropdown a:hover{background:rgba(255,255,255,0.18)}
  nav.primary li.mobile-only{display:none}
  .nav-burger{display:none;width:44px;height:44px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.25);padding:0;cursor:pointer;position:relative;border-radius:6px;color:#fff}
  .nav-burger:hover{background:rgba(255,255,255,0.18)}
  .nav-burger span,.nav-burger span::before,.nav-burger span::after{content:'';display:block;position:absolute;left:50%;width:22px;height:2.5px;background:#fff;border-radius:2px;transform:translateX(-50%);transition:transform 0.2s,top 0.2s,bottom 0.2s,opacity 0.2s}
  .nav-burger span{top:50%;margin-top:-1.25px}
  .nav-burger span::before{top:-7px}
  .nav-burger span::after{top:7px}
  .nav-burger[aria-expanded="true"] span{background:transparent}
  .nav-burger[aria-expanded="true"] span::before{top:0;transform:translateX(-50%) rotate(45deg)}
  .nav-burger[aria-expanded="true"] span::after{top:0;transform:translateX(-50%) rotate(-45deg)}
  @media(max-width:1100px){nav.primary > ul > li > a{padding:11px 13px;font-size:13px}}
  @media(max-width:880px){
    .nav-burger{display:block}
    nav.primary li.mobile-only{display:list-item}
    header .container{position:relative}
    nav.primary{position:static}
    nav.primary > ul{display:none;flex-direction:column;width:auto;background:#3266cc;border-radius:0 0 8px 8px;padding:8px 0;margin:0;box-shadow:0 10px 22px rgba(0,0,0,0.28);position:absolute;top:100%;left:0;right:0;z-index:60;border:1px solid rgba(255,255,255,0.18);border-top:none}
    nav.primary[aria-expanded="true"] > ul{display:flex}
    nav.primary > ul > li{width:100%}
    nav.primary > ul > li > a{padding:13px 22px;border-radius:0;font-size:15px}
    nav.primary > ul > li > a:hover,nav.primary > ul > li > a.active{background:rgba(255,255,255,0.18)}
    nav.primary li.has-dropdown{position:relative;flex-wrap:wrap}
    nav.primary li.has-dropdown > a{flex:1 1 auto;width:auto}
    nav.primary .dd-toggle{flex:0 0 auto;width:48px;height:46px;padding:0;font-size:14px;border-radius:0;border-left:1px solid rgba(255,255,255,0.18)}
    nav.primary li.has-dropdown .dropdown{flex:1 0 100%;width:100%}
    nav.primary .dd-toggle:hover,nav.primary .dd-toggle[aria-expanded="true"]{background:rgba(255,255,255,0.22)}
    nav.primary .dropdown,nav.primary li.has-dropdown:hover .dropdown,nav.primary li.has-dropdown:focus-within .dropdown{position:static;display:none;background:rgba(0,0,0,0.10);box-shadow:none;border:0;border-radius:0;padding:4px 0;margin:0;min-width:0;width:100%}
    nav.primary li.has-dropdown.open .dropdown{display:block}
    nav.primary .dropdown a{padding:10px 22px 10px 38px;font-size:13.5px;color:#e0e9ff;font-weight:500}
    nav.primary .dropdown a:hover{background:rgba(255,255,255,0.18);color:#fff}
  }
  .footer{background:#1a1a2e;color:#cbd5e1;padding:24px 16px;font-size:13.5px;line-height:1.55;text-align:center;margin-top:40px}
  .footer a{color:#93c5fd}
  .tl{display:flex;flex-direction:column;gap:10px}
  .tl-row{position:relative;border:1px solid #9999cc;border-radius:8px;background:#fff;display:grid;grid-template-columns:62px 150px minmax(180px,1.1fr) minmax(180px,1.2fr) 110px 170px;align-items:stretch;overflow:hidden}
  .tl-row > *{padding-top:18px;padding-bottom:18px}
  .tl-row .num{display:inline-flex;align-items:center;justify-content:center;background:#3266cc;color:#fff;font-weight:700;font-size:14px;padding:5px 13px;border-radius:14px;line-height:1;justify-self:center;align-self:center;width:auto}
  .tl-row .lg{display:flex;align-items:center;justify-content:center;padding-left:6px;padding-right:18px;border-right:1px solid rgba(50,102,204,0.18)}
  .tl-row .lg img{width:120px;height:80px;object-fit:contain;background:#fff;padding:6px;border:2px solid #cc4400;border-radius:4px;display:block}
  .tl-row .lg-placeholder{width:120px;height:80px;background:#fff;border:2px solid #cc4400;border-radius:4px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:14px;color:#cc4400;text-decoration:none;letter-spacing:0.3px;padding:6px;line-height:1.1;font-family:Inter,system-ui,sans-serif;text-transform:uppercase}
  .tl-row .descriptor{font-size:15px;font-weight:700;color:#1a1a2e;line-height:1.3;padding-left:18px;padding-right:18px;border-right:1px solid rgba(50,102,204,0.18);display:flex;flex-direction:column;justify-content:center}
  .tl-row .descriptor .lbl,.tl-row .bonus .lbl{display:block;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:4px}
  .tl-row .descriptor .body{display:block}
  .tl-row .bonus{font-size:19px;font-weight:800;line-height:1.2;text-align:center;padding-left:18px;padding-right:18px;display:flex;flex-direction:column;justify-content:center;background:#dbe7f5;border-right:1px solid rgba(50,102,204,0.22)}
  .tl-row .bonus .lbl{color:#3266cc !important}
  .tl-row .bonus .body{display:block;color:#1a1a2e;text-shadow:0 1px 0 rgba(255,255,255,0.7),0 2px 4px rgba(26,26,46,0.22)}
  .tl-row .rating{text-align:center;padding-left:14px;padding-right:14px;display:flex;flex-direction:column-reverse;justify-content:center;align-items:center;gap:4px}
  .tl-row .rating .stars-row{position:relative;display:inline-block;font-size:18px;line-height:1;letter-spacing:1px;color:#d1d5db;white-space:nowrap}
  .tl-row .rating .stars-row .stars-fg{position:absolute;top:0;left:0;white-space:nowrap;color:#f59e0b;overflow:hidden}
  .tl-row .rating .rate{display:block;font-weight:800;font-size:20px;color:#1a1a2e;line-height:1}
  .tl-row .tl-cta{background:#b12627;color:#fff;font-weight:700;font-size:15px;letter-spacing:0.6px;text-transform:uppercase;text-decoration:none;display:flex;align-items:center;justify-content:center;padding:0 18px;border-radius:0;align-self:stretch;transition:background 0.15s}
  .tl-row .tl-cta:hover{background:#8f1f20}
  @media(max-width:1100px){.tl-row{grid-template-columns:48px 110px minmax(140px,1fr) minmax(140px,1fr) 86px 130px}.tl-row > *{padding-top:14px;padding-bottom:14px}.tl-row .lg img{width:96px;height:64px}.tl-row .lg{padding-right:12px}.tl-row .descriptor,.tl-row .bonus{padding-left:12px;padding-right:12px}.tl-row .bonus{font-size:16px}.tl-row .descriptor{font-size:13px}.tl-row .tl-cta{font-size:14px}}
  @media(max-width:760px){
    .tl-row{grid-template-columns:1fr 1fr;grid-template-areas:"num rating" "lg lg" "descriptor descriptor" "bonus bonus" "cta cta";column-gap:0;row-gap:0;overflow:hidden}
    .tl-row > *{padding-top:8px;padding-bottom:8px;border-right:none !important;border-left:none !important}
    .tl-row .num{grid-area:num;justify-self:flex-start;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:#3266cc;border-radius:14px;padding:4px 12px;margin:14px 0 4px 16px;width:auto}
    .tl-row .rating{grid-area:rating;justify-self:flex-end;align-self:flex-start;display:inline-flex;flex-direction:row;align-items:center;gap:6px;padding:0;margin:18px 16px 4px 0}
    .tl-row .rating .stars-row{font-size:14px;letter-spacing:1px}
    .tl-row .rating .rate{display:inline-block;margin:0;font-size:14px;font-weight:800}
    .tl-row .lg{grid-area:lg;justify-content:center;padding:6px 18px}
    .tl-row .lg img{width:128px;height:80px}
    .tl-row .descriptor{grid-area:descriptor;text-align:center;padding:6px 18px 10px}
    .tl-row .descriptor .lbl{margin-bottom:2px}
    .tl-row .bonus{grid-area:bonus;text-align:center;padding:14px 18px;font-size:18px}
    .tl-row .bonus .lbl{margin-bottom:3px}
    .tl-row .tl-cta{grid-area:cta;align-self:stretch;padding:24px 18px;font-size:17px;letter-spacing:0.7px;border-radius:0;width:100%;justify-content:center;min-height:62px}
  }
  .factsheet{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0;background:#fff;border:1px solid #9999cc;border-radius:6px;overflow:hidden}
  .factsheet td{padding:9px 14px;border-bottom:1px solid #e5e7eb;vertical-align:top;line-height:1.45}
  .factsheet tr:last-child td{border-bottom:none}
  .factsheet td.lab{color:#6b7280;font-size:13px;font-weight:500;width:42%;background:#f9fafb}
  .factsheet td.val{font-weight:700;color:#1a1a2e}
  /* Guide visuals */
  .guide-hero{display:block;width:100%;height:auto;border-radius:10px;margin:14px 0 6px;border:1px solid #9999cc}
  .guide-fig{margin:20px 0}
  .guide-fig img{display:block;width:100%;max-width:760px;height:auto;margin:0 auto;border-radius:10px}
  .guide-fig figcaption{font-size:13px;color:#6b7280;margin-top:8px;font-style:italic;text-align:center}
  h1 .h1-ico{width:36px;height:36px;vertical-align:-7px;margin-right:10px}
  h2 .h2-ico{width:23px;height:23px;vertical-align:-3px;margin-right:9px}
  h3 .h3-ico{width:18px;height:18px;vertical-align:-2px;margin-right:7px}
  .reel-cell{background:#fff;border-radius:7px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;line-height:1}
  .reel-win{box-shadow:inset 0 0 0 2px #d4af37;background:#fffdf3}
  .takeaways{background:#eef1f8;border-left:4px solid #d4af37;border-radius:8px;padding:15px 18px;margin:16px 0}
  .takeaways > strong{display:block;color:#1a1a2e;font-size:12.5px;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:8px}
  .takeaways ul{margin:0;padding-left:18px;color:#374151;line-height:1.7;font-size:14.5px}
  /* Blog post hero (image + overlaid title + byline) */
  .post-hero{position:relative;border-radius:12px;overflow:hidden;margin:16px 0 26px;border:1px solid #9999cc;background:#e4ecf7}
  .post-hero > picture{display:block;line-height:0}
  .post-hero > img,.post-hero > picture > img{display:block;width:100%;height:clamp(300px,38vw,420px);object-fit:cover;object-position:88% center;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 20%,#000 54%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,transparent 20%,#000 54%,#000 100%)}
  .post-head{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 clamp(22px,5%,60px);max-width:60%}
  .ph-kicker{display:inline-block;width:fit-content;background:#d4af37;color:#1a1a2e;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.9px;padding:5px 13px;border-radius:30px}
  .post-head h1{margin:0;color:#1a1a2e;font-size:clamp(27px,4vw,46px);line-height:1.06;letter-spacing:-0.7px;font-weight:800}
  .ph-dek{margin:0;color:#3a455b;font-size:clamp(14px,1.6vw,17px);line-height:1.5;max-width:34ch;font-weight:500}
  .ph-byline{display:inline-flex;align-items:center;gap:12px;text-decoration:none;width:fit-content;margin-top:2px}
  .ph-byline img{width:44px;height:44px;border-radius:50%;border:2px solid #3266cc;flex:none;object-fit:cover}
  .ph-byline span{font-size:13px;color:#3f4a5e;line-height:1.42}
  .ph-byline strong{display:block;color:#1a1a2e;font-size:14.5px}
  @media(max-width:760px){
    .post-hero > img,.post-hero > picture > img{height:200px;object-position:center;-webkit-mask-image:none;mask-image:none}
    .post-head{position:static;max-width:100%;padding:18px;background:#dbe7f5;gap:11px}
    .post-head h1{font-size:25px;letter-spacing:-0.4px}
    .ph-dek{max-width:none}
  }
  /* Guide index visual cards */
  .guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin:6px 0 4px}
  .guide-card{display:flex;flex-direction:column;background:#fff;border:1px solid #9999cc;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:transform 0.16s,box-shadow 0.16s,border-color 0.16s}
  .guide-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(26,26,46,0.16);border-color:#3266cc}
  .gc-media{position:relative;height:148px;background:#e4ecf7;overflow:hidden}
  .gc-media img{width:100%;height:100%;object-fit:cover;object-position:72% center;transition:transform 0.3s}
  .guide-card:hover .gc-media img{transform:scale(1.05)}
  .gc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,255,255,0.85) 90%,#fff 100%)}
  .gc-media .ph-kicker{position:absolute;left:14px;top:13px;z-index:2}
  .gc-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
  .gc-body h3{margin:0;font-size:18px;color:#1a1a2e;line-height:1.22}
  .gc-body p{margin:0;font-size:13.5px;color:#4b5563;line-height:1.5;flex:1}
  .gc-link{font-size:13px;font-weight:700;color:#3266cc;margin-top:2px}
  .guide-card:hover .gc-link{text-decoration:underline}
  /* ---- Brand cohesion: navy + gold accents on the light theme (v32) ---- */
  /* dropdowns: gold top rule + gold-tinted hover */
  nav.primary .dropdown{border-color:rgba(202,170,102,0.55)}
  nav.primary .dropdown li + li{border-top:1px solid rgba(202,170,102,0.30)}
  nav.primary .dropdown a:hover{background:rgba(255,255,255,0.07)}
  /* active top-level item: gold underline */
  /* section headings: short gold accent rule (threads gold through every page) */
  .card > h2{position:relative}
  .card > h2::after{content:"";display:block;width:44px;height:3px;background:#caaa66;border-radius:2px;margin-top:10px}
  .card.takeaways > strong::after{content:none}
  /* byline-card: gold left accent + gold ring on headshot */
  /* tables: gold header underline */
  table th{border-bottom:2px solid #caaa66}
  /* breadcrumb current page in navy, links blue (unchanged) */
  /* footer: match masthead navy + gold top rule */
  .footer{background:#0c1c2b;border-top:4px solid #caaa66}
  .footer a{color:#cdd8ea}
  .footer a:hover{color:#f3e2b3}
  /* in-content link hover nudges toward navy for cohesion */
  .card p a:hover,.card li a:hover{color:#0c1c2b}
  /* ---- more navy presence (v34) ---- */
  table th{background:#0c1c2b;color:#fff;border-right-color:rgba(255,255,255,0.12)}
  .review .rank,.tl-row .num{background:#0c1c2b}
  .byline-card img{border-color:#0c1c2b}
  a.byline-card:hover{border-color:#0c1c2b}
  h1,h2,.post-head h1{color:#0c1c2b}
  .byline-card{width:fit-content;max-width:100%}
  /* guide-index cards fill the row width like the banner (v36) */
  .guide-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  /* footer legibility on dark navy */
  .footer{color:#d3dbe8}
  /* Reviews dropdown - 2 columns on desktop only (v37) */
  @media(min-width:881px){
    nav.primary #dd-reviews{min-width:440px;padding:8px}
    nav.primary li.has-dropdown:hover #dd-reviews,nav.primary li.has-dropdown:focus-within #dd-reviews{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
    nav.primary #dd-reviews li{border-top:0 !important}
    nav.primary #dd-reviews .rev-all{grid-column:1 / -1;border-bottom:1px solid rgba(202,170,102,0.40);margin-bottom:4px}
    nav.primary #dd-reviews .rev-all a{font-weight:700;color:#caaa66}
  }
  /* subtle, deprioritized review link beneath each toplist logo (v37) */
  .tl-row .lg{flex-direction:column;gap:7px}
  .tl-row .lg .tl-review{font-size:11px;font-weight:500;color:#5a6b7e;text-decoration:underline;text-underline-offset:2px;text-align:center;white-space:nowrap;letter-spacing:0.2px}
  .tl-row .lg .tl-review:hover{color:#3266cc}
  /* byline container + toplist bonus cell -> refined navy gradient + fine gold edge + white text (v39) */
  .byline-card{background:#0c1c2b;border:1px solid #caaa66;box-shadow:0 2px 12px rgba(12,28,43,0.16)}
  a.byline-card:hover{background:#13283d;border-color:#d4af37}
  .byline-card .nm{color:#fff;text-shadow:none}
  .byline-card .meta{color:#cdd6e3}
  .byline-card .meta a{color:#caaa66}
  .byline-card img,a.byline-card:hover img{border-color:#caaa66}
  .tl-row .bonus{background:#0c1c2b;border:1px solid #caaa66}
  .tl-row .bonus .lbl{color:#caaa66 !important}
  .tl-row .bonus .body{color:#fff;text-shadow:none}
  /* standout welcome-bonus hero on review pages (v40) */
  .bonus-hero{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:#0c1c2b;border:1px solid #caaa66;border-radius:10px;padding:22px 26px;margin:0 0 18px;box-shadow:0 4px 18px rgba(12,28,43,0.22)}
  .bonus-hero .bh-info{flex:1;min-width:260px}
  .bonus-hero .bh-label{display:block;color:#caaa66;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
  .bonus-hero .bh-offer{display:block;color:#fff;font-size:28px;font-weight:800;line-height:1.15}
  .bonus-hero .bh-code{display:inline-block;margin-top:11px;color:#0c1c2b;background:#caaa66;font-size:13px;font-weight:700;padding:4px 13px;border-radius:20px;letter-spacing:0.4px}
  .bonus-hero .bh-code b{letter-spacing:1px}
  .bonus-hero .bh-terms{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:15px}
  .bonus-hero .bh-terms span{color:#e8eef6;font-size:14px;font-weight:700}
  .bonus-hero .bh-terms i{display:block;color:#9fb3c8;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;font-style:normal;margin-bottom:2px}
  .bonus-hero .bh-cta{flex:none;background:#b12627;color:#fff;font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:0.8px;text-decoration:none;padding:16px 30px;border-radius:8px;transition:background 0.15s;box-shadow:0 2px 8px rgba(177,38,39,0.40);align-self:center}
  .bonus-hero .bh-cta:hover{background:#8f1f20}
  @media(max-width:680px){.bonus-hero{padding:18px;gap:16px}.bonus-hero .bh-offer{font-size:22px}.bonus-hero .bh-cta{width:100%;text-align:center}}
  /* thicker gold framing on key containers (v42) */
  .tl-row{border:2px solid #caaa66}
  .byline-card{border-width:2px}
  .bonus-hero{border-width:2px}
  .tl-row .bonus{border-width:2px}
  nav.primary a.nav-parent{cursor:pointer}
  /* reviews hub cards: prominent bonus + dual CTA (v43) */
  .gc-bonus{display:flex;flex-direction:column;gap:1px;background:#0c1c2b;border:2px solid #caaa66;border-radius:8px;padding:9px 13px;margin:2px 0 2px}
  .gc-bonus span{color:#caaa66;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px}
  .gc-bonus strong{color:#fff;font-size:15px;font-weight:800;line-height:1.2}
  .gc-btns{display:flex;gap:8px;margin-top:auto;padding-top:12px}
  .gc-btns a{flex:1;text-align:center;padding:11px 8px;border-radius:7px;font-weight:700;font-size:13.5px;text-decoration:none;transition:background .15s,color .15s}
  .gc-claim{background:#b12627;color:#fff}
  .gc-claim:hover{background:#8f1f20}
  .gc-review{background:#fff;color:#0c1c2b;border:2px solid #0c1c2b}
  .gc-review:hover{background:#0c1c2b;color:#fff}
  /* reviews hub: normalized, outlined logo tiles (v44) */
  .logo-plate{height:132px;background:#fff;display:flex;align-items:center;justify-content:center;padding:12px}
  .logo-plate::after{display:none}
  .logo-plate img{width:174px;max-width:90%;height:80px;object-fit:contain;background:#fff;border:2px solid #caaa66;border-radius:9px;padding:9px;box-sizing:border-box}
  .logo-plate img[src*="palmcasino"]{background:#223a3d}
  /* global star-rating overlay (fixes bare .stars rendering 10 stars instead of 5) (v45) */
  .stars{position:relative;display:inline-block;font-size:15px;line-height:1;color:#d1d5db;white-space:nowrap;letter-spacing:1px}
  .stars .inner{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:#d4af37;letter-spacing:1px}
  .ratenum{font-weight:700;color:#1a1a2e;font-size:14px;margin-left:2px}
  /* mobile burger menu -> navy + gold (was royal blue #3266cc) (v47) */
  @media(max-width:880px){
    nav.primary > ul{background:#0c1c2b;border:1px solid rgba(202,170,102,0.55);border-top:none}
    nav.primary > ul > li + li{border-top:1px solid rgba(202,170,102,0.20)}
    nav.primary .dropdown,nav.primary li.has-dropdown.open .dropdown{background:rgba(0,0,0,0.28)}
    nav.primary .dropdown a{color:#e7eefb}
    nav.primary > ul > li > a:hover,nav.primary > ul > li > a.active,nav.primary .dropdown a:hover{background:rgba(202,170,102,0.16)}
    nav.primary .dd-toggle{border-left:1px solid rgba(202,170,102,0.25)}
    nav.primary .dd-toggle:hover,nav.primary .dd-toggle[aria-expanded="true"]{background:rgba(202,170,102,0.18)}
  }
  /* ===== HOME PORTAL (brand + navigation) v53 ===== */
  .home-hero{background:linear-gradient(160deg,#13243a 0%,#0c1c2b 70%);border:1px solid #caaa66;border-radius:14px;padding:48px 28px;margin:18px 0 26px;text-align:center;box-shadow:0 6px 24px rgba(12,28,43,0.22)}
  .home-hero .hh-logo{height:104px;width:auto;margin:0 auto 18px;display:block}
  .home-hero h1{color:#fff;font-size:clamp(26px,4vw,42px);line-height:1.12;margin:0 auto 14px;max-width:18ch}
  .home-hero .hh-mission{color:#cdd8ea;font-size:clamp(15px,1.7vw,18px);line-height:1.6;max-width:60ch;margin:0 auto 22px}
  .home-hero .hh-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .cta-ghost{display:inline-block;padding:14px 28px;background:transparent;color:#caaa66;font-weight:700;font-size:16px;border:2px solid #caaa66;border-radius:8px;text-decoration:none;transition:background .15s,color .15s}
  .cta-ghost:hover{background:#caaa66;color:#0c1c2b}
  .vp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:6px}
  .vp{background:#fff;border:1px solid #9999cc;border-left:3px solid #caaa66;border-radius:10px;padding:18px}
  .vp .vp-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#0c1c2b;color:#caaa66;font-weight:800;font-size:17px;margin-bottom:10px}
  .vp strong{display:block;color:#0c1c2b;font-size:16px;margin-bottom:4px}
  .vp p{margin:0;font-size:13.5px;color:#4b5563;line-height:1.5}
  /* section-nav cards: extend guide-card with a sub-link list */
  .nav-card .gc-body{gap:8px}
  .nav-card .gc-links{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:2px}
  .nav-card .gc-links a{font-size:12.5px;color:#3266cc;text-decoration:none;font-weight:600;background:#eef1f8;padding:3px 9px;border-radius:20px}
  .nav-card .gc-links a:hover{background:#0c1c2b;color:#fff}
  .nav-card{cursor:default}
  /* top brand picks */
  .pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:4px 0 12px}
  .pick{display:flex;align-items:center;justify-content:center;height:84px;background:#fff;border:2px solid #caaa66;border-radius:10px;padding:10px;text-decoration:none;transition:transform .15s,box-shadow .15s}
  .pick:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(26,26,46,0.14)}
  .pick img{max-height:52px;max-width:84%;object-fit:contain}

/* Split hero - image right / text left on BOTH desktop and mobile (world-cup page). Mirrors offshoreonlinecasinos guide-hero. */
.split-hero{position:relative;overflow:hidden;border-radius:16px;border:1px solid #c3cbe0;background:#e9f0fb;min-height:300px;margin:16px 0 10px}
.split-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:88% center}
.split-hero .sh-head{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:30px 22px;max-width:58%;min-height:300px}
.split-hero .sh-head h1{margin:0;font-size:clamp(22px,2.5vw,34px);line-height:1.13;font-weight:800;color:#1a1a2e}
.split-hero .ph-dek{max-width:42ch}
@media(min-width:761px){.split-hero{height:clamp(300px,34vw,400px)}}
@media(max-width:760px){
  .split-hero>img{object-position:right center}
  .split-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,#e9f0fb 0%,#e9f0fb 30%,rgba(233,240,251,.86) 50%,rgba(233,240,251,.4) 70%,transparent 86%)}
  .split-hero .sh-head{max-width:66%;padding:20px 14px;min-height:300px}
  .split-hero .sh-head h1{font-size:20px}
  .split-hero .ph-dek{font-size:13px;line-height:1.4}
  .split-hero .ph-byline span{font-size:12px}
  .split-hero .ph-byline img{width:38px;height:38px}
}

/* === v54 — designed list treatment: gold motif on content lists, site-wide === */
/* Unclassed prose UL -> gold diamond marker */
#main ul:not([class]){list-style:none;padding-left:2px;margin:0 0 16px}
#main ul:not([class]) > li{position:relative;padding-left:24px;margin-bottom:9px;line-height:1.6}
#main ul:not([class]) > li::before{content:"";position:absolute;left:3px;top:.85em;width:8px;height:8px;transform:translateY(-50%) rotate(45deg);background:linear-gradient(135deg,#e3c069,#caaa66);border-radius:1.5px;box-shadow:0 1px 2px rgba(12,28,43,.18)}
/* Unclassed prose OL -> navy+gold numbered badge ("feature list") */
#main ol:not([class]){list-style:none;counter-reset:pbnum;padding-left:0;margin:0 0 18px}
#main ol:not([class]) > li{counter-increment:pbnum;position:relative;padding-left:46px;margin-bottom:14px;line-height:1.6;min-height:30px}
#main ol:not([class]) > li::before{content:counter(pbnum);position:absolute;left:0;top:1px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(157deg,#1f4060,#0c1c2b 78%);border:1.5px solid #caaa66;color:#e9c96b;font-weight:800;font-size:14px;box-shadow:0 1px 3px rgba(12,28,43,.28)}
/* Bold lead-in -> navy label */
#main ol:not([class]) > li > strong:first-child,
#main ul:not([class]) > li > strong:first-child,
#main .card.takeaways li > strong:first-child{color:#0c1c2b}
/* Pros/Cons -> green check / red cross (after general rules to win the tie) */
#main .pros ul,#main .cons ul{list-style:none;padding-left:0}
#main .pros ul > li,#main .cons ul > li{position:relative;padding-left:22px}
#main .pros ul > li::before{content:"\2713";position:absolute;left:0;top:0;width:auto;height:auto;background:none;transform:none;box-shadow:none;border-radius:0;color:#16a34a;font-weight:800;font-size:13px}
#main .cons ul > li::before{content:"\2717";position:absolute;left:0;top:0;width:auto;height:auto;background:none;transform:none;box-shadow:none;border-radius:0;color:#dc2626;font-weight:800;font-size:13px}

/* === v56 — FAQ accordion: stylized collapsible <details> containers (41 FAQ pages) === */
#main #faq{margin-bottom:12px}
#main details.faq-item{border:1px solid #d8dee9;border-radius:9px;background:#fff;margin:0 0 10px;transition:border-color .15s,box-shadow .15s}
#main details.faq-item[open]{border-color:#caaa66;box-shadow:0 3px 12px rgba(12,28,43,.08)}
#main details.faq-item > summary{list-style:none;cursor:pointer;position:relative;padding:15px 48px 15px 54px;font-size:16px;font-weight:700;color:#0c1c2b;line-height:1.42;border-radius:9px}
#main details.faq-item > summary::-webkit-details-marker{display:none}
#main details.faq-item > summary:hover{background:#f7f9fc}
#main details.faq-item[open] > summary{background:#f7f9fc;border-radius:9px 9px 0 0}
#main details.faq-item > summary::before{content:"Q";position:absolute;left:13px;top:12px;width:28px;height:28px;border-radius:50%;background:linear-gradient(157deg,#1f4060,#0c1c2b 78%);border:1.5px solid #caaa66;color:#e9c96b;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(12,28,43,.28)}
#main details.faq-item > summary::after{content:"";position:absolute;right:20px;top:21px;width:9px;height:9px;border-right:2px solid #caaa66;border-bottom:2px solid #caaa66;transform:rotate(45deg);transition:transform .2s}
#main details.faq-item[open] > summary::after{transform:rotate(225deg);top:24px}
#main .faq-a{padding:4px 18px 16px 54px;color:#41506a;animation:faqfade .18s ease}
#main .faq-a > :last-child{margin-bottom:0}
@keyframes faqfade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* === v57 — .top-pick: compact above-the-fold #1 brand card (split-hero money pages) === */
.top-pick{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(157deg,#1f4060,#0c1c2b 78%);border:2px solid #caaa66;border-radius:12px;padding:15px 18px;margin:14px 0 16px;box-shadow:0 4px 16px rgba(12,28,43,.14);position:relative;text-decoration:none;cursor:pointer;margin-top:28px;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.top-pick:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(12,28,43,.24);border-color:#e3c069}
.top-pick:focus-visible{outline:3px solid #e3c069;outline-offset:2px}
.top-pick .tp-tag{position:absolute;top:-11px;left:18px;background:#caaa66;color:#0c1c2b;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:3px 11px;border-radius:20px}
.top-pick .tp-logo{flex:0 0 auto;background:#fff;border-radius:8px;padding:8px 10px;display:flex;align-items:center;justify-content:center;width:120px;height:58px}
.top-pick .tp-logo img{max-width:100%;max-height:42px;object-fit:contain}
.top-pick .tp-info{flex:1 1 220px;color:#fff;display:flex;flex-direction:column;gap:2px;min-width:190px}
.top-pick .tp-info strong{font-size:17px;color:#fff}
.top-pick .tp-desc{font-size:13px;color:#cdd6e3;line-height:1.4}
.top-pick .tp-bonus{display:flex;align-items:center;gap:9px;margin-top:7px;flex-wrap:wrap}
.top-pick .tp-bonus-lbl{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#0c1c2b;background:#caaa66;padding:3px 8px;border-radius:5px}
.top-pick .tp-bonus-val{font-size:20px;font-weight:800;color:#e9c96b;line-height:1.1}
.top-pick .tp-rating{flex:0 0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;color:#fff}
.top-pick .tp-score{font-size:23px;font-weight:800;color:#fff;line-height:1}
.top-pick .tp-stars{color:#e9c96b;font-size:13px;letter-spacing:1px}
.top-pick .tp-out{font-size:11px;color:#9fb0c4}
.top-pick .tp-cta{flex:0 0 auto;background:#b12627;color:#fff;font-weight:800;font-size:15px;padding:12px 22px;border-radius:8px;text-decoration:none;white-space:nowrap}
.top-pick .tp-cta:hover{background:#9a1f20}
@media(max-width:680px){
  .top-pick{gap:10px 14px;padding:18px 14px 14px}
  .top-pick .tp-logo{order:1}
  .top-pick .tp-rating{order:1;margin-left:auto;flex-direction:row;gap:6px;align-items:center}
  .top-pick .tp-rating .tp-out{display:none}
  .top-pick .tp-info{flex:1 1 100%;order:2}
  .top-pick .tp-cta{order:3;flex:1 1 100%;text-align:center}
}

/* compact split-hero (megaways): DESKTOP image contained on the right so it clears the H1 */
@media(min-width:761px){
  .split-hero.compact-hero{height:clamp(248px,27vw,320px);background:#ecf6ff}
  .split-hero.compact-hero::after{display:none}
  .split-hero.compact-hero>img{left:auto;right:0;width:46%;object-fit:contain;object-position:right center}
  .split-hero.compact-hero .sh-head{max-width:56%}
}
/* MOBILE: crisp stacked hero (image band on top, intro below) so the featured image is fully visible, not washed by the overlay scrim */
@media(max-width:760px){
  .split-hero.compact-hero{display:flex;flex-direction:column;height:auto;min-height:0;background:#ecf6ff;overflow:hidden}
  .split-hero.compact-hero::after{display:none}
  .split-hero.compact-hero>img{position:static;width:100%;height:150px;object-fit:cover;object-position:center 44%;display:block;opacity:1}
  .split-hero.compact-hero .sh-head{position:static;max-width:100%;min-height:0;padding:14px}
}
@media(max-width:680px){.top-pick .tp-desc{display:none}.top-pick{padding:16px 14px 12px}}