/* Keep larger screens in a compact grid; phones show one full-width device per row. */
.intro h1 { letter-spacing: .01em; }

@media (min-width: 1000px) {
  .device-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .intro { padding: 22px 0 18px; }
  .intro h1 { font-size: 35px; margin: 8px 0 0; }
  .intro p { display: none; }
  .overview { gap: 8px; margin-bottom: 12px; }
  .overview h2 { margin: 3px 0 2px; }
  .overview-actions { gap: 8px; }

  .device-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    overflow: visible;
    padding: 0;
  }

  .device-card { padding: 12px 14px; border-radius: 15px; }
  .device-head { align-items: center; padding-bottom: 7px; }
  .device-kicker { font-size: 9px; margin-bottom: 1px; }
  .device-title { font-size: 17px; line-height: 1.2; }
  .device-meta { margin-top: 2px; font-size: 11px; line-height: 1.25; }
  .plan-pill { padding: 3px 7px; font-size: 10px; }
  .window-list { gap: 9px; margin-top: 9px; }
  .window-top { margin-bottom: 5px; }
  .window-label { font-size: 12px; }
  .window-value { font-size: 18px; }
  .bar { height: 6px; }
  .window-reset { margin-top: 4px; font-size: 11px; line-height: 1.3; }
  .device-foot { margin-top: 9px; padding-top: 7px; font-size: 10px; }
}

/* Readable type without changing the device card grid or card width. */
.eyebrow { font-size: 14px; letter-spacing: .14em; }
.intro p { font-size: 17px; }
.overview h2 { font-size: 30px; }
.subtle { font-size: 16px; }
.count-pill { font-size: 15px; padding: 7px 11px; }
.primary-button, .outline-button { min-height: 50px; padding-inline: 16px; font-size: 16px; }
.unlock-card { padding: 22px; }
.unlock-copy h2 { font-size: 24px; }
.unlock-copy p { font-size: 16px; }
.unlock-controls input { height: 50px; padding-inline: 12px; font-size: 16px; }
.unlock-error { font-size: 15px; }
.unlock-card .remember-control { grid-column: 2; }

.device-card { padding: 18px; }
.device-head { gap: 8px; padding-bottom: 13px; }
.device-head > div:first-child { flex: 1; min-width: 0; }
.device-kicker { font-size: 14px; letter-spacing: .1em; margin-bottom: 4px; }
.device-title { font-size: 21px; line-height: 1.2; }
.device-meta { font-size: 15px; margin-top: 4px; }
.plan-pill { flex: none; font-size: 13px; padding: 4px 8px; }
.window-list { margin-top: 15px; gap: 14px; }
.window-top { margin-bottom: 7px; }
.window-label { font-size: 16px; }
.window-value { font-size: 22px; }
.window-reset { font-size: 14px; line-height: 1.38; margin-top: 6px; overflow-wrap: anywhere; }
.device-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 15px; padding-top: 10px; font-size: 14px; line-height: 1.35; }
.device-foot span:last-child { text-align: right; }
.notice, .empty-state { font-size: 16px; }

@media (max-width: 720px) {
  .eyebrow { font-size: 13px; }
  .overview h2 { font-size: 27px; }
  .subtle { font-size: 14px; }
  .count-pill { font-size: 14px; }
  .unlock-card { padding: 16px; }
  .unlock-copy h2 { font-size: 22px; }
  .unlock-copy p { font-size: 15px; }
  .device-card { padding: 10px 11px; }
  .device-head { padding-bottom: 6px; }
  .device-kicker { font-size: 13px; }
  .device-title { font-size: 19px; }
  .device-meta { font-size: 14px; }
  .plan-pill { font-size: 13px; padding: 4px 6px; }
  .window-list { margin-top: 8px; gap: 8px; }
  .window-top { margin-bottom: 5px; }
  .window-label { font-size: 15px; }
  .window-value { font-size: 20px; }
  .window-reset { font-size: 14px; margin-top: 5px; }
  .device-foot { margin-top: 8px; padding-top: 7px; font-size: 13px; }
}