/* Hardware page (/platform/hardware.html). Cards reuse platform-hardware.css. */
.hwp-page {
  --hwp-purple: #7c3aed;
  --hwp-inox: #059669;
  --hwp-aco: #2563eb;
}

/* Hero: full-bleed photo, copy over the calm left side */
.hwp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(calc(100svh - 4.6rem), 820px);
  display: flex;
  align-items: center;
  padding: clamp(5.5rem, 9vw, 8rem) max(1.25rem, calc((100vw - 1200px) / 2));
  background: #eef0f4;
}
.hwp-hero-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hwp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(247, 247, 251, .94) 0%, rgba(247, 247, 251, .82) 34%, rgba(247, 247, 251, 0) 58%); }
.hwp-hero-copy { max-width: 560px; }
.hwp-eyebrow { display: flex; align-items: center; gap: .65rem; color: #7041bd; font: 800 .72rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.hwp-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.hwp-hero h1 { margin: 1.1rem 0; font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.04; letter-spacing: -.05em; }
.hwp-hero h1 em { color: var(--hwp-purple); font-style: normal; }
.hwp-lead { color: #52525b; font-size: 1.05rem; line-height: 1.75; }
.hwp-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1.8rem; }
.hwp-tag { padding: .45rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .85); font: 700 .69rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.hwp-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Common platform strip */
.hwp-base { padding: clamp(3.5rem, 6vw, 5rem) max(1.25rem, calc((100vw - 1200px) / 2)); background: #10121d; color: #fff; }
.hwp-base-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hwp-base-copy .eyebrow { color: #c4b5fd; }
.hwp-base-copy h2 { margin: .6rem 0 .8rem; color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -.035em; }
.hwp-base-copy p:last-child { margin: 0; color: rgba(255, 255, 255, .7); line-height: 1.7; }
.hwp-base-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius); overflow: hidden; }
.hwp-base-list li { display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem 1.4rem; background: #10121d; }
.hwp-base-list strong { color: #c4b5fd; font: 700 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.hwp-base-list span { font-size: 1.15rem; font-weight: 650; }

/* Kiosk cards: show every spec line */
.hwp-kiosks .kiosk-specs-list li { font-size: .84rem; }

/* Comparison table */
.hwp-compare { padding: 1rem max(5%, calc((100% - 1280px) / 2)) 5rem; }
.hwp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; -webkit-overflow-scrolling: touch; }
.hwp-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: .88rem; }
.hwp-table th, .hwp-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.hwp-table tbody tr:last-child th, .hwp-table tbody tr:last-child td { border-bottom: 0; }
.hwp-table thead th { background: var(--soft); font-size: .8rem; font-weight: 700; }
.hwp-table thead th.hwp-col-aco { box-shadow: inset 0 3px 0 var(--hwp-aco); }
.hwp-table thead th.hwp-col-inox { box-shadow: inset 0 3px 0 var(--hwp-inox); }
.hwp-table th[scope="row"], .hwp-table thead th:first-child { text-align: left; color: var(--muted); font-weight: 600; position: sticky; left: 0; background: #fff; }
.hwp-table thead th:first-child { background: var(--soft); }
.hwp-yes { color: var(--hwp-purple); font-weight: 800; }
.hwp-no { color: var(--muted-soft); }

.hwp-supervision { background: #f7f7fb; }

@media (max-width: 1024px) {
  .hwp-page .kiosks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hwp-base-inner { grid-template-columns: 1fr; }
  /* Photo moves below the copy on small screens */
  .hwp-hero { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; background: #f7f7fb; }
  .hwp-hero::before { display: none; }
  .hwp-hero-media { position: static; z-index: auto; order: 2; height: auto; aspect-ratio: 4 / 3; margin: 2rem calc(-1 * max(1.25rem, calc((100vw - 1200px) / 2))) 0; width: auto; object-position: 78% center; }
}
@media (max-width: 640px) {
  .hwp-page .kiosks-grid { grid-template-columns: 1fr; }
  .hwp-base-list { grid-template-columns: 1fr; }
}

/* Tablet + PDT side by side, TV Dashboard full width below */
.hwp-supervision .hwp-device-wide { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .hwp-supervision .extra-devices-grid { grid-template-columns: 1fr; }
}