/* A compact, honest test report. Brand orange stays an accent; body text is dark. */
.gr-hardware {
  --gr-orange: var(--kabocy-color-site-brand, #ff5b00);
  --gr-ink: #20332d;
  margin: 32px 0;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid #eadfc9;
  border-radius: 24px;
  background: #fff8ec;
  color: var(--gr-ink);
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.gr-hardware *, .gr-hardware *::before, .gr-hardware *::after { box-sizing: border-box; }
.gr-hardware .gr-hardware__header h2 { margin: 8px 0 12px; padding: 0; border: 0; background: none; color: var(--gr-ink); font-size: clamp(21px, 2.5vw, 28px); line-height: 1.45; }
.gr-hardware .gr-hardware__header h2::before, .gr-hardware .gr-hardware__header h2::after { display: none; }
.gr-hardware p { margin: 0 0 12px; }
.gr-hardware .gr-hardware__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; color: #466153; font: 700 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.gr-hardware__eyebrow > span { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 27px; border-radius: 7px; background: var(--gr-ink); color: #fff4e1; font-size: 15px; }
.gr-hardware .gr-hardware__disclosure { margin: 14px 0 22px; color: #554a3a; font-size: 13px; }
.gr-hardware__pr { display: inline-block; margin-right: 5px; padding: 0 6px; border: 1px solid #a07555; border-radius: 4px; color: #78421f; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.gr-hardware__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: start; gap: 16px; }
.gr-hardware__card { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid #e0dfd6; border-top: 3px solid var(--gr-orange); border-radius: 17px; background: #fff; box-shadow: 0 4px 0 #20332d08; transition: box-shadow .2s ease, border-color .2s ease; }
.gr-hardware__card-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 11px; }
.gr-hardware__category { color: #54675e; font-weight: 700; }
.gr-hardware__status { padding: 3px 8px; border: 1px solid #c7dfd2; border-radius: 30px; background: #edf8f0; color: #235c3c; font-weight: 700; }
.gr-hardware__status--limited { border-color: #e8d1ad; background: #fff6df; color: #79501a; }
.gr-hardware .gr-hardware__card h3 { margin: 0 0 8px; padding: 0; border: 0; background: none; color: var(--gr-ink); font-size: 21px; line-height: 1.45; }
.gr-hardware .gr-hardware__card h3::before, .gr-hardware .gr-hardware__card h3::after { display: none; }
.gr-hardware .gr-hardware__environment { margin-bottom: 5px; font-size: 14px; font-weight: 700; }
.gr-hardware__environment span { color: #55675d; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.gr-hardware .gr-hardware__date { margin-bottom: 17px; color: #5d665f; font-size: 12px; }
.gr-hardware__date span { display: inline-block; color: #80521d; }
.gr-hardware .gr-hardware__card h4 { margin: 0 0 6px; padding: 0; border: 0; background: none; color: inherit; font-size: 13px; font-weight: 800; }
.gr-hardware__result, .gr-hardware__limits { margin: 0 0 14px; font-size: 13px; }
.gr-hardware__result > p, .gr-hardware__limits > p { margin: 0; }
.gr-hardware__limits { padding: 12px; border-left: 3px solid #ebba74; border-radius: 0 9px 9px 0; background: #fff8ec; color: #634a29; }
.gr-hardware__details { margin: 0 0 16px; border-top: 1px solid #e4e8e2; border-bottom: 1px solid #e4e8e2; font-size: 13px; }
.gr-hardware__details > summary { min-height: 46px; padding: 11px 0; cursor: pointer; color: #294f3e; font-weight: 700; }
.gr-hardware__details > div { padding: 2px 0 8px; }
.gr-hardware .gr-hardware__scope { padding: 10px; border-radius: 8px; background: #f1f5ef; font-size: 12px; }
.gr-hardware a:not(.gr-hardware__cta) { color: #295e48; text-decoration: underline; text-underline-offset: 3px; }
.gr-hardware a:focus-visible, .gr-hardware summary:focus-visible { outline: 3px solid #285c9e; outline-offset: 4px; border-radius: 5px; }
.gr-hardware__footer { margin-top: auto; }
.gr-hardware .gr-hardware__footer > p:first-child { margin: 0 0 7px; color: #526059; font-size: 12px; }
.gr-hardware .gr-hardware__cta { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 48px; padding: 11px 14px; border: 1px solid #c24400; border-radius: 12px; background: #b73f00; color: #fff; text-decoration: none; font-size: 14px; font-weight: 800; line-height: 1.55; transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease; }
.gr-hardware .gr-hardware__cta:hover { background: #963400; color: #fff; box-shadow: 0 4px 12px #b73f0022; }
.gr-hardware .gr-hardware__cta:active { transform: scale(.98); }
.gr-hardware .gr-hardware__purchase-note { margin: 8px 0 0; color: #62665e; font-size: 11px; }
.gr-hardware__sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
@media (hover: hover) { .gr-hardware__card:hover { border-color: #ddb998; box-shadow: 0 7px 20px #20332d0c; } }
@media (max-width: 480px) { .gr-hardware { margin: 24px 0; padding: 16px 12px; border-radius: 18px; } .gr-hardware__card { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .gr-hardware__card, .gr-hardware .gr-hardware__cta { transition: none; } .gr-hardware .gr-hardware__cta:active { transform: none; } }