/* HP BETA 03.21 — screenshot-aligned, fully responsive trio. No external library. */
.hpc-app .hpt24-home .hpt0321-trio{
  display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,1fr)!important;
  gap:14px!important;align-items:stretch!important;width:100%!important;max-width:1540px!important;
  min-width:0!important;margin:16px auto 18px!important;padding:0!important;box-sizing:border-box;
}
.hpc-app .hpt0321-trio>*{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
.hpc-app .hpt0321-trio .hpt0321-stat-bar{
 grid-column:1 / -1!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
 min-height:69px!important;height:auto!important;gap:0!important;align-items:stretch!important;
 padding:8px 12px!important;background:#f3f7fd!important;border:none!important;border-radius:16px!important;
 box-shadow:0 4px 24px rgba(25,69,135,.035)!important;overflow:hidden!important;
}
.hpt0321-stat{display:flex;align-items:center;justify-content:center;gap:13px;min-width:0;min-height:52px;
 color:#122b52!important;text-decoration:none!important;padding:4px 14px;position:relative}
.hpt0321-stat:not(:last-child)::after{content:"";position:absolute;right:0;top:11px;bottom:11px;width:1px;background:#d6e2f1}
.hpt0321-stat>i{flex:none;color:#1171e5;font-size:23px;line-height:1}
.hpt0321-stat>span{min-width:0;display:flex;flex-direction:column;gap:2px}
.hpt0321-stat strong{font-size:clamp(12px,1vw,17px);font-weight:750;line-height:1.15;white-space:normal;color:#11294b}
.hpt0321-stat small{font-size:clamp(9px,.72vw,11px);font-weight:480;line-height:1.3;color:#60728b;white-space:normal}
.hpt0321-stat:hover strong{color:#0767d9}
.hpc-app .hpt0321-trio>.hptv2-trio-card{
 display:flex!important;flex-direction:column!important;gap:0!important;min-height:183px!important;height:auto!important;
 padding:15px 16px 12px!important;background:#fff!important;border:1px solid #e6edf7!important;
 border-radius:16px!important;box-shadow:0 5px 23px rgba(19,48,92,.055)!important;
 overflow:hidden!important;color:#102b54;transition:box-shadow .15s ease,border-color .15s ease;
}
.hpc-app .hpt0321-trio>.hptv2-trio-card:hover{border-color:#cbdcf6!important;box-shadow:0 7px 26px rgba(16,72,160,.09)!important}
.hpt0321-trio .hptv2-trio-head{display:flex;align-items:center;gap:11px;min-height:40px;padding:0 0 10px;margin:0;flex:none;border-bottom:none}
.hpt0321-trio .hptv2-trio-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;background:none;border-radius:0;color:#0876ed;font-size:22px}
.hpt0321-trio .hptv2-trio-head h2{font-size:clamp(13px,1vw,17px);font-weight:740;line-height:1.24;letter-spacing:-.02em;margin:0;color:#0d254c}
.hpt0321-trio .hptv2-trio-head p{font-size:10px;line-height:1.4;font-weight:450;color:#667895;margin:3px 0 0}
/* First card: live first-year registration prices for the four real domain extensions. */
.hpt0321-trio .hpt0321-tld-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:100%;min-width:0;margin-top:7px}
.hpt0321-trio .hpt0321-tld{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;
 padding:11px 3px 9px;min-height:74px;text-align:center;text-decoration:none!important;color:#183557;
 background:#fff;border:1px solid #edf1f8;border-radius:10px;box-shadow:0 3px 11px rgba(21,58,103,.055)}
.hpt0321-trio .hpt0321-tld:hover{background:#f6faff;border-color:#b6d3fb}
.hpt0321-trio .hpt0321-tld>strong{font-size:clamp(11px,.95vw,14px);font-weight:760;letter-spacing:-.015em;color:#152c53;white-space:nowrap}
.hpt0321-trio .hpt0321-tld-price{display:block;width:100%;min-width:0;color:#0967df;font-size:clamp(9px,.78vw,12px);font-weight:780;line-height:1.3;overflow-wrap:anywhere}
.hpt0321-trio .hpt0321-tld-price .hpc-convert-price,
.hpt0321-trio .hpt0321-tld-price .hpt284-domain-price,
.hpt0321-trio .hpt0321-tld-price [class*="price"]{font-size:inherit!important;color:inherit!important;font-weight:inherit!important;line-height:inherit!important;white-space:normal!important}
.hpt0321-trio .hpt0321-tld-empty{font-size:10px;color:#8190a6;font-weight:500}
.hpt0321-trio .hpt0321-domains .hptv2-trio-more{border:0!important;min-height:26px;margin-top:auto!important;padding-top:10px;color:#086ee3;font-size:11px;font-weight:660;line-height:1.3}
/* Second card: existing real click counter rows; same row HTML is used by the idle refresh endpoint. */
.hpt0321-trio .hpt0321-firms>.hptv2-trio-head{border-bottom:1px solid #edf2f9!important;padding-bottom:10px}
.hpt0321-trio .hpt0321-firms>.hptv2-trio-list{display:flex;flex-direction:column;justify-content:center;gap:0;min-height:0;flex:1}
.hpt0321-trio .hpt0321-firm-row{display:flex!important;align-items:center;gap:9px;min-height:37px;padding:6px 2px!important;
 background:transparent!important;border:0!important;border-radius:0!important;color:#183659;text-decoration:none!important;
 border-bottom:1px solid #f0f4fa!important}
.hpt0321-trio .hpt0321-firm-row:last-child{border-bottom:0!important}
.hpt0321-trio .hpt0321-firm-row:hover{background:#f4f9ff!important}
.hpt0321-trio .hpt0321-firm-row .hptv2-trio-rank{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;
 border-radius:50%;font-size:11px;font-weight:760;background:#e9eff7;color:#4d617e}
.hpt0321-trio .hpt0321-firm-row .hpt0321-rank-1{background:#ffeed0;color:#dc871f}
.hpt0321-trio .hpt0321-firm-row .hptv2-mini-logo{width:72px;flex:0 0 72px;min-width:0;height:26px;max-height:26px;display:grid;place-items:center;overflow:hidden}
.hpt0321-trio .hpt0321-firm-row .hptv2-mini-logo img{width:100%!important;max-width:70px!important;height:25px!important;max-height:25px!important;object-fit:contain!important;border:0!important;background:transparent!important}
.hpt0321-trio .hpt0321-firm-row .hptv2-trio-item-name{min-width:0;flex:1 1 auto;display:block;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpt0321-trio .hpt0321-firm-arrow{color:#528bce;font-size:10px;flex:none}
.hpt0321-trio .hpt0321-firm-row .hptv2-trio-clicks{flex:none;font-size:10px;font-weight:730;white-space:nowrap;color:#2a4975}
/* Third card: text + lightweight SVG image + bordered CTA. */
.hpt0321-trio .hpt0321-compare>.hptv2-trio-head{padding-bottom:8px}
.hpt0321-trio .hpt0321-compare-body{position:relative;display:flex;align-items:center;justify-content:space-between;gap:7px;flex:1;min-height:90px}
.hpt0321-trio .hpt0321-compare-body>p{min-width:0;max-width:58%;margin:0!important;font-size:11px;line-height:1.55;font-weight:460;color:#526987}
.hpt0321-trio .hpt0321-compare-art{display:block;max-width:42%;width:128px;height:auto;aspect-ratio:135/110;object-fit:contain;flex:none}
.hpt0321-trio .hpt0321-compare-link{display:flex;align-items:center;justify-content:center;gap:9px;min-height:36px;padding:7px 11px;
 width:70%;max-width:236px;min-width:0;margin-top:auto;text-decoration:none!important;border:1px solid #5c9dff;border-radius:9px;
 font-size:11px;font-weight:720;color:#0869da;background:#fff;box-shadow:inset 0 0 0 1px #dbe9ff}
.hpt0321-trio .hpt0321-compare-link:hover{background:#edf6ff;border-color:#0872e9}
@media(max-width:1120px){
 .hpc-app .hpt24-home .hpt0321-trio{gap:10px!important}
 .hpc-app .hpt0321-trio>.hptv2-trio-card{padding:12px 10px!important}
 .hpt0321-stat{gap:9px;padding:4px 8px}
 .hpt0321-trio .hpt0321-tld-grid{gap:4px}
 .hpt0321-trio .hpt0321-firm-row{gap:5px}
 .hpt0321-trio .hpt0321-firm-row .hptv2-mini-logo{width:54px;flex-basis:54px}
 .hpt0321-trio .hpt0321-firm-row .hptv2-mini-logo img{max-width:53px!important}
}
@media(max-width:820px){
 .hpc-app .hpt24-home .hpt0321-trio{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .hpc-app .hpt0321-trio .hpt0321-stat-bar{grid-column:1/-1!important}
 .hpc-app .hpt0321-trio>.hpt0321-compare{grid-column:1/-1!important;min-height:125px!important}
 .hpt0321-trio .hpt0321-compare-body{min-height:70px}
 .hpt0321-trio .hpt0321-compare-body>p{max-width:70%}
 .hpt0321-trio .hpt0321-compare-art{width:100px;max-width:28%}
}
@media(max-width:620px){
 .hpc-app .hpt24-home .hpt0321-trio{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;margin:12px auto 15px!important;padding:0 9px!important}
 .hpc-app .hpt0321-trio>.hptv2-trio-card{grid-column:1/-1!important;width:100%!important;min-height:0!important;padding:13px 14px 12px!important;border-radius:14px!important}
 .hpc-app .hpt0321-trio .hpt0321-stat-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;min-height:0!important;padding:6px!important;border-radius:13px!important}
 .hpt0321-stat{min-height:53px;justify-content:flex-start;padding:7px 10px;gap:10px}
 .hpt0321-stat:nth-child(2)::after{display:none}
 .hpt0321-stat:nth-child(-n+2){border-bottom:1px solid #dce7f5}
 .hpt0321-stat>i{font-size:18px}
 .hpt0321-stat strong{font-size:12px}
 .hpt0321-stat small{font-size:9px}
 .hpt0321-trio .hpt0321-tld-grid{gap:7px}
 .hpt0321-trio .hpt0321-tld{min-height:76px;padding:10px 2px 8px}
 .hpt0321-trio .hpt0321-tld>strong{font-size:12px}
 .hpt0321-trio .hpt0321-tld-price{font-size:10px}
 .hpt0321-trio .hpt0321-firm-row{min-height:42px;gap:7px}
 .hpt0321-trio .hpt0321-firm-row .hptv2-mini-logo{width:70px;flex-basis:70px}
 .hpt0321-trio .hpt0321-firm-row .hptv2-mini-logo img{max-width:68px!important}
 .hpt0321-trio .hpt0321-compare-art{width:116px;max-width:40%}
 .hpt0321-trio .hpt0321-compare-body>p{max-width:58%;font-size:11px}
 .hpt0321-trio .hpt0321-compare-link{width:100%;max-width:none}
}
@media(max-width:360px){
 .hpc-app .hpt24-home .hpt0321-trio{padding:0 6px!important}
 .hpc-app .hpt0321-trio>.hptv2-trio-card{padding:12px 10px!important}
 .hpt0321-trio .hpt0321-tld-grid{gap:5px}
 .hpt0321-trio .hpt0321-tld-price{font-size:9px}
 .hpt0321-trio .hpt0321-firm-row .hptv2-mini-logo{width:55px;flex-basis:55px}
 .hpt0321-trio .hpt0321-firm-row .hptv2-mini-logo img{max-width:53px!important}
 .hpt0321-trio .hpt0321-firm-row .hptv2-trio-item-name{font-size:10px}
}
/* Preserve readable contrasts across existing dark-mode variants. */
html[data-hpt-theme="dark"] .hpc-app .hpt0321-trio .hpt0321-stat-bar{background:#182d47!important}
html[data-hpt-theme="dark"] .hpt0321-trio .hpt0321-stat :is(strong,small){color:#e4f0ff!important}
html[data-hpt-theme="dark"] .hpc-app .hpt0321-trio>.hptv2-trio-card{background:#172b46!important;border-color:#3a5272!important;color:#ecf4ff!important}
html[data-hpt-theme="dark"] .hpt0321-trio :is(.hptv2-trio-head h2,.hpt0321-tld>strong,.hptv2-trio-item-name){color:#f0f7ff!important}
html[data-hpt-theme="dark"] .hpt0321-trio .hpt0321-tld{background:#233a56!important;border-color:#3e587c!important}
html[data-hpt-theme="dark"] .hpt0321-trio .hpt0321-compare-link{background:#243a5b!important;color:#b5d8ff!important}
html[data-hpt-theme="dark"] .hpt0321-trio .hpt0321-compare-body p{color:#c3d6ed!important}
@media(prefers-reduced-motion:reduce){.hpt0321-trio :is(.hptv2-trio-card,.hpt0321-stat){transition:none!important}}