/* Backlink Health quadrant (template-parts/bh-quad.php): the cover of Mike's "Backlink Health Check" deck as real HTML.
   2x2 plane, Reclaim / Protect (top / bottom) x Off your site / On your site (left / right), thin axis lines through the
   gutters, four tinted cards with coloured titles (cyan, green, pink, amber: the deck's, lifted for AA on the navy panel).
   Not links: no hover, no gold. No motion of its own (the tab panel's 180 ms fade covers it). Sized from its own width
   (container units), so it fits the tab frame's right column (~400-500 px) and phones (~320 px) as the same 2x2. */
.svc2-wt__panel .svc2-wt__fig--quad{aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
.bhq-w{container-type:inline-size;width:100%;max-width:420px;margin:0 auto}
.bhq{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;gap:10px;align-items:center;justify-items:center;font-family:var(--font,inherit)}
.bhq-cap{grid-column:1/-1;grid-row:1;margin:0 0 8px;font-size:clamp(13.5px,3.6cqi,16px);line-height:1.4;color:var(--ss-line-strong,#c9d2db);text-align:center;text-wrap:balance}
.bhq-ax{font-size:clamp(10px,2.6cqi,11.5px);font-weight:700;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--mist,#a7b6c6);white-space:nowrap}
.bhq-ax--t{grid-column:2;grid-row:2;margin-right:-.24em}
.bhq-ax--b{grid-column:2;grid-row:4;margin-right:-.24em}
.bhq-ax--l,.bhq-ax--r{grid-row:3;writing-mode:vertical-rl;margin-bottom:-.24em}
.bhq-ax--l{grid-column:1;transform:rotate(180deg)}
.bhq-ax--r{grid-column:3}
.bhq-grid{grid-column:2;grid-row:3;position:relative;list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px}
.bhq-grid::before,.bhq-grid::after{content:"";position:absolute;background:rgba(255,255,255,.22);pointer-events:none}
.bhq-grid::before{left:50%;top:-8px;bottom:-8px;width:1px;margin-left:-.5px}
.bhq-grid::after{top:50%;left:-8px;right:-8px;height:1px;margin-top:-.5px}
.bhq-c{--c:56,208,240;position:relative;z-index:1;margin:0;min-width:0;aspect-ratio:1/.8;align-self:stretch;justify-self:stretch;display:flex;flex-direction:column;gap:.45em;padding:clamp(11px,4cqi,18px);border:1px solid rgba(var(--c),.5);border-radius:14px;background:linear-gradient(rgba(var(--c),.1),rgba(var(--c),.1)),var(--navy,#001b2e)}
.bhq-c--dead{--c:45,212,150}
.bhq-c--spam{--c:255,127,140}
.bhq-c--broken{--c:255,166,77}
.bhq-t{margin:0;font-size:clamp(14.5px,4.4cqi,19px);font-weight:700;line-height:1.18;letter-spacing:-.005em;color:rgb(var(--c));text-wrap:balance}
.bhq-d{margin:0;font-size:clamp(13px,3.5cqi,15px);line-height:1.4;color:var(--ss-line-strong,#c9d2db)}
.bhq-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@container (max-width:340px){.bhq,.bhq-grid{gap:8px}.bhq-c{border-radius:12px}}