/* Public pages: the marketing site (landing, pricing), sign-in, sign-up,
 * account recovery, contact, and the legal pages. Light only. Builds on
 * tokens.css and the components in console.css.
 */

.public-bar {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--iot-space-4);
  border-bottom: 1px solid var(--iot-border);
}
.public-bar .brand {
  color: var(--iot-text);
  font-weight: 600;
  text-decoration: none;
}

/* Auth screens are one of the few places content is centered. */
.auth-main {
  display: flex;
  justify-content: center;
  padding: var(--iot-space-6) var(--iot-space-4) var(--iot-space-7);
}
.auth-card {
  width: 100%;
  max-width: 440px;
}
.auth-card.reading { max-width: 640px; }
.auth-card h1 { margin-bottom: var(--iot-space-3); }
.auth-card .lede { color: var(--iot-text-secondary); margin-bottom: var(--iot-space-5); }

.auth-card form .field input[type=text],
.auth-card form .field input[type=email],
.auth-card form .field input[type=password],
.auth-card form .field input[type=tel] { width: 100%; }

.auth-card .actions { margin-top: var(--iot-space-5); }
.auth-card .actions button.primary { width: 100%; }
.auth-card .alt {
  margin-top: var(--iot-space-5);
  color: var(--iot-text-secondary);
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--iot-space-3);
  margin: var(--iot-space-5) 0;
  color: var(--iot-text-muted);
  font-size: var(--iot-size-small);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--iot-border);
}

.btn.block { width: 100%; }

.public-footer {
  display: flex;
  gap: var(--iot-space-4);
  justify-content: center;
  padding: var(--iot-space-5) var(--iot-space-4);
  border-top: 1px solid var(--iot-border);
  font-size: var(--iot-size-small);
}
.public-footer a { color: var(--iot-text-secondary); }

/* ------------------------------------------------------------ marketing site */

.site-bar { justify-content: space-between; gap: var(--iot-space-4); flex-wrap: wrap; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--iot-space-4); }
.site-nav a { color: var(--iot-text-secondary); text-decoration: none; display: inline-flex; align-items: center;
              min-height: var(--iot-touch); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--iot-text); }

.site-main { max-width: 1080px; margin: 0 auto; padding: 0 var(--iot-space-4); }
.site-section { padding: var(--iot-space-6) 0; border-top: 1px solid var(--iot-border); }
.site-section:first-child { border-top: 0; }
.narrow-section { max-width: 680px; }
.site-section h2 { margin-bottom: var(--iot-space-4); }
.site-section .lede { color: var(--iot-text-secondary); max-width: 62ch; }
.small { font-size: var(--iot-size-small); }
.overline { font-size: var(--iot-size-small); text-transform: uppercase; letter-spacing: 0.06em;
            color: var(--iot-text-muted); margin: 0 0 var(--iot-space-2); }

.hero { display: flex; flex-wrap: wrap; gap: var(--iot-space-6); align-items: flex-start;
        padding: var(--iot-space-7) 0 var(--iot-space-6); }
.hero-copy { flex: 1 1 360px; min-width: 0; }
.hero-copy h1 { font-size: var(--iot-size-title); line-height: 1.3; margin-bottom: var(--iot-space-4); max-width: 30ch; }
.hero-copy .lede { color: var(--iot-text-secondary); max-width: 58ch; margin-bottom: var(--iot-space-5); }
.hero-actions { margin-bottom: var(--iot-space-3); }

.illustration { flex: 1 1 300px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: var(--iot-space-3); }
.trigger-card p { margin: 0 0 var(--iot-space-2); }
.sms { background: var(--iot-surface); border: 1px solid var(--iot-border); border-radius: var(--iot-radius-panel);
       padding: var(--iot-space-4); }
.sms-bubble { margin: 0; padding: var(--iot-space-3) var(--iot-space-4); max-width: 34ch;
              background: var(--iot-raised); border: 1px solid var(--iot-border);
              border-radius: var(--iot-radius-panel); }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
         gap: var(--iot-space-5); }
.steps li { counter-increment: step; flex: 1 1 240px; min-width: 0; }
.steps h3 { font-size: var(--iot-size-heading); margin: 0 0 var(--iot-space-2); }
.steps h3::before { content: counter(step) ". "; color: var(--iot-text-muted); }
.steps p { color: var(--iot-text-secondary); margin: 0; }

table.features th[scope="row"], table.pricing th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap;
                                                               vertical-align: top; text-transform: none; letter-spacing: 0;
                                                               font-size: var(--iot-size-body); color: var(--iot-text); }
table.features td { color: var(--iot-text-secondary); }
table.pricing td.actions { white-space: nowrap; }

.closing p { max-width: 62ch; }
.faq dt { font-weight: 600; margin-top: var(--iot-space-4); }
.faq dd { margin: var(--iot-space-1) 0 0; color: var(--iot-text-secondary); }

.public-footer { flex-wrap: wrap; }

/* Phones: the pricing and feature tables become stacked cards, so prices are
   never hidden behind a sideways scroll. */
@media (max-width: 767px) {
  table.pricing thead { display: none; }
  table.pricing, table.pricing tbody, table.pricing tr, table.pricing th, table.pricing td,
  table.features, table.features tbody, table.features tr, table.features th, table.features td { display: block; }
  table.pricing, table.features { white-space: normal; overflow-x: visible; }
  table.pricing tr, table.features tr { padding: var(--iot-space-3) 0; border-bottom: 1px solid var(--iot-border); }
  table.pricing th, table.pricing td, table.features th, table.features td { border: 0; padding: var(--iot-space-1) 0; }
  table.pricing td.num { display: flex; justify-content: space-between; text-align: right; }
  table.pricing td[data-label]::before { content: attr(data-label); color: var(--iot-text-muted); text-align: left; }
  table.pricing td.hide-narrow { display: none; }
  table.pricing td.actions { padding-top: var(--iot-space-2); }
  table.features th[scope="row"] { white-space: normal; }
}

/* Terms and Privacy: a narrow reading view. */
.legal { max-width: 720px; }
.legal h1 { margin-bottom: var(--iot-space-3); }
.legal h2 { margin: var(--iot-space-6) 0 var(--iot-space-3); scroll-margin-top: var(--iot-space-4); }
.legal ol, .legal ul { padding-left: var(--iot-space-5); }
.legal li { margin-bottom: var(--iot-space-2); max-width: 70ch; }
.legal p { max-width: 70ch; }
.legal table td { white-space: normal; vertical-align: top; }