/* Shared components: buttons, cards, badges, notices, prose, section rhythm. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp2);
  min-height: var(--h-ctl);
  padding: 0 var(--sp5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent-btn);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: var(--accent-btn-hover);
  color: var(--on-accent);
}

.btn-primary:active {
  background: var(--accent-press);
}

.btn-support {
  background: var(--accent-support);
  color: var(--on-support);
}

.btn-support:hover {
  background: var(--support-btn-hover);
  color: var(--on-support);
}

.btn-support:active {
  background: var(--support-press);
}

.btn-lg {
  min-height: 52px;
  padding: 0 var(--sp6);
  font-size: var(--fs-lg);
}

.btn-secondary {
  background: var(--panel-bg);
  color: var(--accent-btn-hover);
  border-color: var(--accent);
}

.btn-secondary:hover {
  background: var(--selection-bg);
  color: var(--accent-btn-hover);
}

.btn[aria-disabled="true"],
.btn:disabled {
  background: var(--fill-dim);
  color: var(--text-faint);
  border-color: var(--border);
  cursor: not-allowed;
}

.badge {
  display: inline-block;
  padding: 2px var(--sp3);
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent-btn-hover);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-soon {
  border: 1px dashed var(--support-line);
  background: var(--support-tint);
  color: var(--support);
}

.badge-remote {
  background: var(--accent-tint);
  color: var(--accent-btn-hover);
}

.badge-support {
  background: var(--support-tint);
  color: var(--support);
}

.badge-ok {
  background: var(--ok-fill);
  color: var(--ok-text);
}

.card {
  padding: var(--sp5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
}

.notice {
  padding: var(--sp3) var(--sp4);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--text-primary);
}

.notice-warn {
  border-color: var(--warn-line);
  background: var(--warn-fill);
  color: var(--warn-text);
}

.notice-crit {
  border-color: var(--crit-line);
  background: var(--crit-fill);
  color: var(--crit-text);
}

.notice-ok {
  border-color: var(--ok-line);
  background: var(--ok-fill);
  color: var(--ok-text);
}

.section {
  padding: var(--sp7) 0;
}

.section-title {
  margin-bottom: var(--sp5);
}

.section-lead {
  max-width: var(--prose-max);
  color: var(--text-dim);
}

.prose {
  max-width: var(--prose-max);
}

.prose h2 {
  margin-top: var(--sp6);
}

.prose h3 {
  margin-top: var(--sp5);
}

.prose li {
  margin-bottom: var(--sp1);
}

.page-head {
  padding: var(--sp7) 0 var(--sp5);
}

.page-headLead {
  max-width: var(--prose-max);
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-lg);
}

/* Rhythm after a block: a heading that follows text, a list, a table or a card starts a new part; a note that follows a
   card or a requirements block keeps a line of air. */
.container > :is(p:not(.eyebrow), ul, ol, dl, .table-wrap, .card, .notice, .spec) + :is(h2, h3) {
  margin-top: var(--sp6);
}

:is(.card, .spec, .notice) + :is(p, .field-hint) {
  margin-top: var(--sp4);
}

.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--sp4);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel-bg);
}

.table th,
.table td {
  padding: var(--sp2) var(--sp3);
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.table th {
  background: var(--fill-dim);
}

.shot {
  margin: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.shot figcaption {
  margin-top: var(--sp2);
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.field {
  display: grid;
  gap: var(--sp1);
}

.field label {
  font-weight: 700;
}

.field-required {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="password"],
.field textarea {
  width: 100%;
  min-height: var(--h-ctl);
  padding: var(--sp2) var(--sp3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  color: var(--text-primary);
  font: inherit;
}

.field textarea {
  resize: vertical;
}

.field [aria-invalid="true"] {
  border-color: var(--crit-text);
}

.field-error {
  margin: 0;
  color: var(--crit-text);
  font-size: var(--fs-sm);
}

.field-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field .consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp3);
  font-weight: 400;
}

.consent-label input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
}

.field-hint {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.field-hint[data-state="ok"] {
  color: var(--ok-text);
}

.field-hint[data-state="bad"] {
  color: var(--crit-text);
}

.t-display {
  font-size: var(--fs-display);
  line-height: 1.14;
  letter-spacing: -0.04em;
}

.t-h1 {
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.t-h2 {
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.t-h3 {
  font-size: var(--fs-xl);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.t-lead {
  max-width: 34em;
  color: var(--text-dim);
  font-size: var(--fs-lead);
  line-height: 1.7;
}

.num {
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  margin: 0 0 var(--sp4);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--grad-brand);
}

.on-dark,
.section-dark,
.cta-band {
  color: var(--on-dark);
}

.section-dark,
.cta-band {
  background: var(--hero-dark);
}

.on-dark .t-lead,
.section-dark .t-lead,
.cta-band .t-lead {
  color: var(--dim-on-dark);
}

.on-dark .eyebrow,
.section-dark .eyebrow {
  color: var(--remote-on-dark);
}

.on-dark a:not(.btn),
.section-dark a:not(.btn) {
  color: var(--remote-on-dark);
}

.on-dark .btn-primary,
.section-dark .btn-primary,
.cta-band .btn-primary {
  background: var(--remote-on-dark);
  color: var(--ink-900);
}

.on-dark .btn-primary:hover,
.section-dark .btn-primary:hover,
.cta-band .btn-primary:hover {
  background: var(--focus-on-dark);
  color: var(--ink-900);
}

.on-dark .btn-secondary,
.section-dark .btn-secondary,
.cta-band .btn-secondary {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--field-on-dark);
}

.on-dark .btn-secondary:hover,
.section-dark .btn-secondary:hover,
.cta-band .btn-secondary:hover {
  background: var(--ink-700);
  color: var(--on-dark);
}

.on-dark .btn-support,
.section-dark .btn-support,
.cta-band .btn-support {
  background: var(--support-on-dark);
  color: var(--ink-900);
}

.cta-band {
  padding: var(--sp8) 0;
  text-align: center;
}

.cta-band .t-lead {
  margin-inline: auto;
}

.cta-bandActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp3);
  margin-top: var(--sp5);
}

.section-band,
.section-quiet {
  background: var(--fill-dim);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--sp6);
}

.section-head .section-title {
  margin-bottom: var(--sp3);
}

@media (min-width: 960px) {
  .section-roomy {
    padding: var(--sp9) 0;
  }
}

.device {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-lg);
  background: var(--ink-700);
  box-shadow: var(--shadow-device);
}

.device-bar {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  height: 32px;
  padding: 0 var(--sp3);
  background: var(--ink-600);
  color: var(--dim-on-dark);
  font-size: var(--fs-xs);
}

.device-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--field-on-dark);
}

.device-title {
  margin-left: var(--sp2);
}

.device img {
  display: block;
  width: 100%;
  height: auto;
}

.device-light {
  border-color: var(--border);
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
}

.device-light .device-bar {
  background: var(--fill-dim);
  color: var(--text-faint);
}

.device-light .device-dot {
  background: var(--border);
}

.productCard {
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
  padding: var(--sp6);
  border: 1px solid var(--border);
  border-top-width: 4px;
  border-top-color: var(--accent-remote);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
}

.productCard-soon {
  border-color: var(--support-line);
  border-top-color: var(--accent-support);
  background: var(--support-tint);
  box-shadow: none;
}

.productCard-head {
  display: flex;
  align-items: center;
  gap: var(--sp4);
}

.productCard-icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
}

.productCard-head h2,
.productCard-head h3 {
  margin: 0 0 var(--sp1);
}

.productCard > p {
  margin: 0;
  color: var(--text-dim);
}

.productCard-body {
  flex: 1;
}

.productCard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp3);
}

.productCard-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-ctl);
  padding: 0 var(--sp2);
  font-weight: 700;
}

.productCard-soonBox {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: var(--sp5);
  border: 2px dashed var(--support-line);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  text-align: center;
}

.productCard-soonBox img {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--sp3);
}

.productCard-soonBox p {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.spec {
  padding: var(--sp5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
}

.spec-title {
  margin-bottom: var(--sp3);
  font-size: var(--fs-lg);
}

.spec-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.spec-row {
  display: grid;
  gap: var(--sp1) var(--sp4);
  padding: var(--sp2) 0;
  border-bottom: 1px dashed var(--border);
}

.spec-row:last-child {
  border-bottom: 0;
}

.spec-row dt {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.spec-row dd {
  margin: 0;
}

.spec-pending {
  color: var(--text-faint);
}

.spec-foot {
  margin: var(--sp3) 0 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

@media (min-width: 600px) {
  .spec-row {
    grid-template-columns: 9em 1fr;
  }
}