/* Editorial ratings and badges. Ratings pack 30 Aug 2026. Documentary fit score, not a lab test. Chip colour is not a ranking. */ .xr-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px} .xr-score{display:inline-flex;flex-direction:column;line-height:1.15} .xr-score__value{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:#17324d} .xr-score__caption{font-size:.68rem;letter-spacing:.02em;color:#6b7a8c;text-transform:none} .xr-score__plan{font-size:.68rem;color:#6b7a8c} .xr-line{margin:0 0 10px;font-size:.86rem;line-height:1.45;color:#3d4a5c; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .xr-methodology{margin:18px 0 0;padding:14px 16px;border-left:3px solid #0f766e;background:#f3f7fa; font-size:.9rem;line-height:1.6;color:#33414f;border-radius:0 8px 8px 0} .xr-reason{margin:6px 0 0;font-size:.82rem;line-height:1.5;color:#54606f} /* Chips. Solid dark = top pick; the rest are not a rank order. */ .xr-ribbon,.xr-chip{display:inline-block;padding:4px 10px;border-radius:999px; font-size:.7rem;font-weight:700;letter-spacing:.02em;line-height:1.3; white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent} .xr-badge--top-pick{background:#12233a;color:#fff;border-color:#12233a} .xr-badge--best-value{background:#0f766e;color:#fff;border-color:#0f766e} .xr-badge--best-budget{background:#fff;color:#4d5b1f;border-color:#8a9a3d} .xr-badge--best-premium{background:#2f3742;color:#f3d488;border-color:#c9a227} .xr-badge--best-cordless,.xr-badge--best-for-facturacion,.xr-badge--best-for-centralino, .xr-badge--best-for-podcast,.xr-badge--best-for-avatars,.xr-badge--best-for-beginners, .xr-badge--best-for-iceland,.xr-badge--best-for-poland,.xr-badge--best-for-smb{ background:#eef3f8;color:#2d4a6b;border-color:#c3d3e2} /* Ribbon sitting on a card photo. */ .xr-card-figure{position:relative} .xr-card-figure .xr-ribbon{position:absolute;top:10px;left:10px;z-index:2; box-shadow:0 1px 4px rgba(12,25,40,.22)} /* Picks strip above the full grid. */ .xr-picks{margin:0 0 34px} .xr-picks__heading{margin:0 0 4px;font-size:1.35rem;line-height:1.25} .xr-picks__note{margin:0 0 16px;font-size:.84rem;color:#6b7a8c} .xr-picks__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .xr-pick{border:1px solid #d9e3eb;border-radius:14px;padding:16px;background:#fff; display:flex;flex-direction:column;gap:8px} .xr-pick__name{margin:0;font-size:1rem;font-weight:700;line-height:1.3;color:#17324d;min-height:2.6em} .xr-pick__line{margin-top:auto} .xr-pick__line{margin:0;font-size:.84rem;line-height:1.45;color:#3d4a5c} .xr-pick .xr-meta{margin:0} .xr-pick__name a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(23,50,77,.28)} .xr-pick__name a:hover,.xr-pick__name a:focus{border-bottom-color:currentColor} .xr-pick__flag{margin:0;font-size:.68rem;letter-spacing:.02em;color:#6b7a8c} .xr-picks__disclosure{margin:0 0 14px;font-size:.78rem;line-height:1.5;color:#54606f;max-width:74ch} .xr-pick .xr-ribbon{white-space:normal} /* Table columns. */ .xr-cell{white-space:nowrap;font-weight:700;color:#17324d} .xr-cell--muted{font-weight:400;color:#8a97a6} td .xr-ribbon,th .xr-ribbon{white-space:normal} @media (max-width:640px){ .xr-picks__grid{grid-template-columns:1fr} .xr-ribbon,.xr-chip{white-space:normal} } /* ------------------------------------------------------------------ Go-live pack 30 Aug 2026. Grid proportions, card alignment and the wide-content measure. Shipped under a new filename because static assets carry a one-year cache header. ------------------------------------------------------------------ */ /* Product grid. Explicit tracks with a real maximum, centred: auto-fit with a percentage minimum collapses to a single track in this layout. */ .hp-conversion-grid, .hp-conversion-grid--1, .hp-conversion-grid--2, .hp-conversion-grid--3, .hp-conversion-grid--4{ grid-template-columns:minmax(0,560px); justify-content:center; max-width:none; margin-inline:auto; gap:22px; } @media(min-width:1024px){ .hp-conversion-grid, .hp-conversion-grid--2, .hp-conversion-grid--3, .hp-conversion-grid--4{grid-template-columns:repeat(2,minmax(0,560px))} .hp-conversion-grid--1{grid-template-columns:minmax(0,560px)} } /* Crop fix 20260901: give robots a square media band, never a 220px crush. */ .hp-conversion-card__media-slot{ aspect-ratio:1/1; height:auto; min-height:0; overflow:hidden; background:#fff; } .hp-conversion-card__media-slot>img, .hp-conversion-card__media img{ box-sizing:border-box; width:100% !important; height:100% !important; max-height:100% !important; aspect-ratio:auto !important; padding:28px; object-fit:contain !important; object-position:center; background:#fff; } .hp-conversion-card__media figcaption{min-height:0;padding:7px 16px;font-size:11px} .hp-conversion-card__body{padding:20px 20px 22px} .hp-conversion-card__body h3{min-height:0;font-size:24px} .hp-conversion-card__difference{min-height:0} /* Two price boxes side by side instead of stacked. */ .hp-conversion-card__prices{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:6px 0 0} .hp-conversion-card__prices>div{min-height:0;display:block;padding:11px 0} .hp-conversion-card__price-note{margin:8px 0 12px;font-size:11.5px;line-height:1.45} .hp-conversion-card__best-for{margin:0 0 10px} .hp-conversion-card__updated{margin:0 0 14px} /* Card interiors read left. Only the buttons are centred. */ .hp-conversion-card__body, .hp-conversion-card__body p, .hp-conversion-card__body h3, .hp-conversion-card__body dl, .hp-conversion-card__body dt, .hp-conversion-card__body dd, .hp-conversion-card__body .xr-line, .hp-conversion-card__body .xr-meta{text-align:left} .hp-conversion-card__landed strong{text-align:right} .hp-conversion-card__action{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto} .hp-conversion-card__cta{ display:flex; width:100%; min-height:46px; margin-top:0; align-items:center; justify-content:center; text-align:center; } @media(max-width:860px){ .hp-conversion-card__media-slot{height:auto;aspect-ratio:1/1} .hp-conversion-card__prices{grid-template-columns:1fr 1fr} } @media(max-width:520px){ .hp-conversion-card__prices{grid-template-columns:1fr} } /* Wide content leaves the 820px prose measure on desktop. */ @media(min-width:1024px){ .hp-site-page .hp-conversion>.hp-container, .hp-site-page .hp-commercial-summary>.hp-container, .hp-site-page .hp-brand-assets, .hp-site-page .hp-product-evidence{max-width:1160px} } .hp-site-page .hp-article-content .hp-batch-table-scroll, .hp-site-page .hp-article-content .hp-table-scroll{ --hp-wide:min(1160px,calc(100vw - 48px)); width:var(--hp-wide); max-width:none; margin-inline:calc((100% - var(--hp-wide)) / 2); } @media(max-width:1023px){ .hp-site-page .hp-article-content .hp-batch-table-scroll, .hp-site-page .hp-article-content .hp-table-scroll{ --hp-wide:100%; width:100%; margin-inline:0; } } /* Every table keeps its own horizontal scroll container on small screens. */ .hp-table-scroll,.hp-batch-table-scroll{max-width:100%;overflow-x:auto} /* Picks strip sits on the section background, not on bare page. */ .xr-picks{margin:0 0 30px;padding:22px 24px;border:1px solid #dfe7ec;border-radius:18px;background:#fff} .xr-picks__heading{color:#102a43;font-size:1.3rem;font-weight:800} .xr-picks__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} .hp-conversion-card .xr-meta{margin:10px 0 6px} .hp-conversion-card .xr-line{margin:0 0 14px} /* Click-to-load video facade: nothing reaches YouTube until it is clicked. */ .hp-external-media-placeholder{display:grid;place-items:center;min-height:320px;padding:28px; border-radius:14px;background:linear-gradient(140deg,#102a43,#1d5368);color:#fff;text-align:center} .hp-external-media-placeholder strong{display:block;font-size:20px;line-height:1.2} .hp-external-media-placeholder p{margin:10px auto 18px;max-width:44ch;color:#d8e9ed;font-size:14px;line-height:1.55} .hp-external-media-placeholder button{min-height:48px;padding:12px 22px;border:0;border-radius:10px; background:#0f766e;color:#fff;font:inherit;font-weight:800;cursor:pointer} .hp-external-media-placeholder button:hover, .hp-external-media-placeholder button:focus-visible{background:#0b5f59} .hp-product-video{position:relative} .hp-product-video iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:14px} /* Picks strip: headings and card interiors read left, like the product cards. */ .xr-picks,.xr-picks__heading,.xr-picks__note,.xr-pick, .xr-pick__name,.xr-pick__line,.xr-pick__flag,.xr-pick .xr-meta{text-align:left} .xr-pick__name{min-height:0;margin:2px 0 0} .xr-picks__heading{margin:0 0 6px} /* Trim the vertical rhythm inside the product card. */ .hp-conversion-card__body h3{margin:2px 0 0} .hp-conversion-card .xr-meta{margin:8px 0 4px} .hp-conversion-card__landed{margin:10px 0 8px} .hp-conversion-card__best-for{margin:0 0 8px} .hp-conversion-card__updated{margin:0 0 12px} @media(max-width:520px){ .hp-conversion-card__action{grid-template-columns:1fr} } /* Comparison table: an explicit 1120px min-width clipped it inside the 1080px container at desktop widths. Fit the columns instead of scrolling. */ @media(min-width:1024px){ .hp-conversion-table .hp-table-scroll>table{min-width:0;width:100%;table-layout:fixed} .hp-conversion-table th, .hp-conversion-table td{padding:13px 9px;font-size:13px;word-break:normal;overflow-wrap:anywhere} .hp-conversion-table thead th{font-size:11px} .hp-conversion-table td small, .hp-conversion-table th small{font-size:11px;line-height:1.35} .hp-conversion-table__action{width:118px;text-align:center} .hp-conversion-table__action .hp-table-cta{width:100%;min-width:0;padding:9px 6px;font-size:12px} } /* Selector tool: 1fr tracks were sized by the longest