/* HP BETA 03.28 — article embeds. Enqueued separately after legacy styles. */
.hpt-article-content .hpt0328-blog-panel,
.hpt-article-content .hpt2818-blog-panel{box-sizing:border-box;min-width:0;width:100%;max-width:100%;margin:24px 0;padding:17px;border:1px solid #dbe7f7;border-radius:16px;background:#f7faff;box-shadow:0 8px 26px rgba(19,57,110,.045);color:#132f55;overflow:hidden}
.hpt0328-blog-panel *,.hpt2818-blog-panel *{box-sizing:border-box}
.hpt0328-blog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;margin:0 0 15px}
.hpt0328-blog-head>div{min-width:0}
.hpt0328-blog-eyebrow{display:block;font-size:9px;letter-spacing:.085em;font-weight:650;color:#4a80c2;margin-bottom:3px}
.hpt-article-content .hpt0328-blog-head h2{margin:0!important;font-size:clamp(15px,1.4vw,19px)!important;line-height:1.3!important;font-weight:600!important;color:#112b52!important}
.hpt0328-blog-head>a{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:550;color:#0b65dc!important;text-decoration:none!important;white-space:nowrap}
.hpt0328-blog-list{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;min-width:0}
.hpt0328-blog-offer{position:relative;display:grid;grid-template-columns:100px minmax(0,1fr) 112px;grid-template-areas:'logo identity price' 'logo specs actions';gap:8px 13px;align-items:center;min-width:0;padding:12px;background:#fff;border:1px solid #e0e9f5;border-radius:12px;box-shadow:0 3px 11px rgba(13,57,118,.035);overflow:hidden}
.hpt0328-blog-offer.is-sponsored{border-color:#e2bc72;background:linear-gradient(100deg,#fffcf4 0%,#fff 34%);box-shadow:0 3px 15px rgba(176,124,38,.075)}
.hpt0328-blog-logo{grid-area:logo;display:flex;align-items:center;justify-content:flex-start;width:100%;min-width:0;height:58px;overflow:hidden;text-decoration:none!important}
.hpt0328-blog-logo img,.hpt0328-blog-logo .hpc-company-logo{display:block;width:100%!important;max-width:100%!important;height:44px!important;max-height:44px!important;object-fit:contain!important;object-position:left center!important}
.hpt0328-blog-logo :is(.hpc-logo-fallback,span){max-width:100%}
.hpt0328-blog-identity{grid-area:identity;display:flex;align-items:center;flex-wrap:wrap;align-content:center;gap:5px 8px;min-width:0}
.hpt0328-blog-category{display:inline-flex;align-items:center;max-width:100%;background:#ecf4ff;border-radius:6px;padding:4px 7px;font-size:10px;color:#0a64da!important;line-height:1.2;white-space:normal;text-decoration:none!important;font-weight:550}
.hpt0328-blog-name{display:block;flex:1 1 140px;min-width:0;color:#152f58!important;font-size:11px;font-weight:650;line-height:1.4;text-decoration:none!important;overflow-wrap:anywhere}
.hpt0328-blog-specs{grid-area:specs;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0;width:100%}
.hpt0328-blog-specs>span{display:flex;align-items:center;gap:6px;min-width:0;color:#5a7090;font-size:9px;line-height:1.3;white-space:nowrap;overflow:hidden}
.hpt0328-blog-specs i{flex:none;color:#337cce;font-size:10px}
.hpt0328-blog-specs>span>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hpt0328-blog-price{grid-area:price;display:flex;flex-direction:column;gap:2px;min-width:0;text-align:right;line-height:1.25}
.hpt0328-blog-price small{font-size:9px;color:#72829c}
.hpt0328-blog-price strong{font-size:15px;line-height:1.3;font-weight:650;color:#0969e6;white-space:nowrap}
.hpt0328-blog-price :is(.hpc-convert-price,.hpc-money){white-space:nowrap}
.hpt0328-blog-price strong small{font-size:9px}
.hpt0328-blog-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0}
.hpt0328-blog-detail,.hpt0328-blog-compare{display:inline-flex;justify-content:center;align-items:center;gap:5px;min-height:30px;min-width:0;border-radius:8px;font-size:10px;font-weight:600;line-height:1.2;white-space:nowrap;padding:7px 9px;text-decoration:none!important;cursor:pointer}
.hpt0328-blog-detail{border:1px solid #0966e4;background:linear-gradient(155deg,#1683fb,#095de0);color:#fff!important;box-shadow:0 3px 9px rgba(12,107,225,.15)}
.hpt0328-blog-compare{border:1px solid #bfd6f3;background:#fff;color:#0d60c8!important}
.hpt0328-blog-sponsored{display:inline-flex;align-items:center;gap:5px;position:relative;flex:none;padding:5px 9px;border-radius:7px;background:linear-gradient(135deg,#e5bf6a,#c69227 58%,#e7bd5b);color:white!important;font-size:10px;line-height:1.1;font-weight:700;overflow:hidden;box-shadow:0 2px 9px rgba(171,114,20,.13)}
.hpt0328-blog-sponsored:after{content:'';position:absolute;inset:-10% auto -10% -43%;width:43%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);transform:translateX(-140%) skewX(-20deg);animation:hpt0328BlogShine 3.8s ease-in-out infinite;pointer-events:none}
@keyframes hpt0328BlogShine{0%,10%{transform:translateX(-140%) skewX(-20deg);opacity:0}18%{opacity:.8}32%{transform:translateX(270%) skewX(-20deg);opacity:0}100%{transform:translateX(270%) skewX(-20deg);opacity:0}}
/* Top-five community inset: same typography without changing the real ranking. */
.hpt-article-content .hpt2818-blog-head{align-items:center;gap:12px;margin:0 0 12px}
.hpt-article-content .hpt2818-blog-head h2{font-size:17px!important;font-weight:600!important;line-height:1.35!important;margin:0!important}
.hpt-article-content .hpt2818-blog-head a{font-size:11px;font-weight:550;text-decoration:none!important}
.hpt-article-content .hpt2818-blog-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;min-width:0}
.hpt-article-content .hpt2818-blog-ranked{min-width:0;display:flex;flex-direction:row;align-items:center;gap:9px;border:1px solid #e1eaf6;background:#fff;border-radius:10px;padding:11px;text-decoration:none!important}
.hpt-article-content .hpt2818-blog-ranked img{width:60px!important;max-height:34px!important;object-fit:contain!important;flex:none}
.hpt-article-content .hpt2818-blog-ranked b{font-size:11px;font-weight:600;color:#172f55}
.hpt-article-content .hpt2818-blog-ranked small{white-space:normal;font-size:9px;color:#607895}
.hpt0328-blog-sponsor-panel{margin:22px 0}
html[data-hpt-theme="dark"] .hpt0328-blog-panel,html[data-hpt-theme="dark"] .hpt2818-blog-panel{background:#15263e;color:#e9f3ff;border-color:#395573}
html[data-hpt-theme="dark"] .hpt0328-blog-offer,html[data-hpt-theme="dark"] .hpt2818-blog-ranked{background:#1a314e;border-color:#3c5a7b;color:#eaf3ff}
html[data-hpt-theme="dark"] .hpt0328-blog-offer.is-sponsored{background:linear-gradient(100deg,#342d20,#1a314e 42%);border-color:#8a7144}
html[data-hpt-theme="dark"] .hpt-article-content .hpt0328-blog-head h2,html[data-hpt-theme="dark"] .hpt0328-blog-name,html[data-hpt-theme="dark"] .hpt-article-content .hpt2818-blog-ranked b{color:#eef6ff!important}
html[data-hpt-theme="dark"] .hpt0328-blog-specs>span{color:#b9cbe5}
html[data-hpt-theme="dark"] .hpt0328-blog-compare{background:#223c59;color:#c9e3ff!important;border-color:#44688f}
@media(max-width:780px){
 .hpt0328-blog-offer{grid-template-columns:84px minmax(0,1fr);grid-template-areas:'logo identity' 'specs specs' 'price actions';gap:11px 10px;padding:12px}
 .hpt0328-blog-logo{height:45px}
 .hpt0328-blog-logo img,.hpt0328-blog-logo .hpc-company-logo{max-height:36px!important;height:36px!important}
 .hpt0328-blog-specs{padding:8px 9px;background:#f3f7ff;border-radius:8px}
 .hpt0328-blog-price{text-align:left}
 .hpt0328-blog-actions{justify-content:flex-end}
 .hpt0328-blog-detail,.hpt0328-blog-compare{min-height:33px}
 html[data-hpt-theme="dark"] .hpt0328-blog-specs{background:#223d5c}
}
@media(max-width:480px){
 .hpt-article-content .hpt0328-blog-panel,.hpt-article-content .hpt2818-blog-panel{padding:11px;border-radius:12px}
 .hpt0328-blog-head{align-items:flex-start;gap:8px}
 .hpt0328-blog-head>a{font-size:9px}
 .hpt0328-blog-offer{grid-template-columns:78px minmax(0,1fr);gap:9px 10px}
 .hpt0328-blog-logo img,.hpt0328-blog-logo .hpc-company-logo{max-height:32px!important;height:32px!important}
 .hpt0328-blog-name{font-size:10px}
 .hpt0328-blog-category{font-size:9px;padding:3px 6px}
 .hpt0328-blog-specs{gap:5px;padding:7px}
 .hpt0328-blog-specs>span{font-size:8px;gap:4px}
 .hpt0328-blog-price strong{font-size:14px}
 .hpt0328-blog-price small{font-size:8px}
 .hpt0328-blog-detail,.hpt0328-blog-compare{font-size:9px;padding:7px;min-height:32px}
 .hpt-article-content .hpt2818-blog-cards{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:350px){.hpt0328-blog-actions{flex-wrap:wrap}.hpt0328-blog-actions>*{flex:1 1 60px}}
@media(prefers-reduced-motion:reduce){.hpt0328-blog-sponsored:after{animation:none!important}}

/* HP BETA 03.30 — Article package cards: only one clear detail action.
   Intentionally scoped to article embeds; listing and homepage comparisons unchanged. */
.hpt-article-content .hpt0328-blog-offer{
 grid-template-columns:105px minmax(0,1fr) 116px;
 column-gap:12px;
}
.hpt-article-content .hpt0328-blog-actions{
 display:flex;justify-content:stretch;align-items:center;width:100%;min-width:0;
}
.hpt-article-content .hpt0328-blog-detail{
 display:inline-flex;align-items:center;justify-content:center;
 width:100%;min-width:0;min-height:34px;padding:8px 10px;
 gap:7px;font-size:10px;line-height:1.25;white-space:nowrap;
}
.hpt-article-content .hpt0328-blog-price{min-width:0}
.hpt-article-content .hpt0328-blog-specs{min-width:0}
@media(max-width:780px){
 .hpt-article-content .hpt0328-blog-offer{
  grid-template-columns:minmax(90px,1fr) minmax(0,1.6fr);
  grid-template-areas:'logo identity' 'specs specs' 'price actions';
  row-gap:10px;column-gap:10px;
 }
 .hpt-article-content .hpt0328-blog-actions{justify-content:flex-end}
 .hpt-article-content .hpt0328-blog-detail{width:min(100%,160px);min-height:35px}
}
@media(max-width:480px){
 .hpt-article-content .hpt0328-blog-offer{grid-template-columns:minmax(94px,1fr) minmax(0,1.5fr)}
 .hpt-article-content .hpt0328-blog-detail{min-height:34px;font-size:10px}
}