/* Support pages — mobile-first. Shared by support.html, support-deviceopen-ai.html, support-tool-box.html.
   Layout rhythm follows tokens/layout.css + tokens/spacing.css; typography follows the token system's
   two-tier (mobile / desktop) contract in tokens/typography.css.

   Breakpoint tiers per source mockup:
   - support.dc.html has 3 frames (base + 834 + 1440) -> .support-hero / .support-routes / .support-expect
     get base, 834, and 1440 rules.
   - support-deviceopen-ai.dc.html and support-tool-box.dc.html have 2 frames (base + 1440 only) ->
     .support-detail__* gets base and 1440 rules only, no 834 or 1200 tier. */

.section { border-top: var(--dl-border-hairline) solid var(--dl-border-default); }

/* ---------- Shared: safety notice ---------- */
.safety-note {
  background: var(--dl-accent-soft); border: var(--dl-border-hairline) solid var(--dl-accent-border);
  border-radius: var(--dl-radius-sm); padding: var(--dl-space-2);
}
.safety-note__label {
  display: block; font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  color: var(--dl-accent-text-light); text-transform: uppercase;
}
.safety-note__text { margin: 6px 0 0; font-size: var(--dl-body-small-size-mobile); line-height: var(--dl-body-small-lh); color: var(--dl-text-body); }

/* ================= Support hub (support.html) ================= */

/* ---------- Hero ---------- */
.support-hero {
  padding: var(--dl-space-4) var(--dl-gutter-mobile) var(--dl-space-3);
  display: flex; flex-direction: column; gap: var(--dl-space-2);
  max-width: 760px;
}
.support-hero__eyebrow {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--dl-text-accent); text-transform: uppercase;
}
.support-hero__title {
  font-size: var(--dl-h1-size-mobile); font-weight: var(--dl-weight-semibold);
  line-height: var(--dl-h1-lh); letter-spacing: var(--dl-h1-tracking); text-wrap: pretty;
}
.support-hero__lead { font-size: var(--dl-body-size-mobile); line-height: var(--dl-body-lh); color: var(--dl-text-body); max-width: 46ch; }

/* ---------- Routes ---------- */
.support-routes { padding: var(--dl-space-4) var(--dl-gutter-mobile); }
.support-routes__grid { display: flex; flex-direction: column; gap: var(--dl-space-2); }
.support-routes__card {
  border: var(--dl-border-hairline) solid var(--dl-border-default); border-radius: var(--dl-radius-sm);
  padding: var(--dl-space-3); display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--dl-duration-fast) var(--dl-ease), background var(--dl-duration-fast) var(--dl-ease);
}
.support-routes__card:hover { background: var(--dl-steel-100); border-color: var(--dl-border-stronger); }
.support-routes__card-eyebrow { font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.support-routes__card-title { font-size: var(--dl-h3-size-mobile); font-weight: var(--dl-weight-semibold); color: var(--dl-text-primary); }
.support-routes__card-desc { font-size: var(--dl-body-small-size); line-height: var(--dl-body-small-lh); color: var(--dl-text-body); }

/* ---------- What to expect ---------- */
.support-expect { padding: var(--dl-space-4) var(--dl-gutter-mobile); }
.support-expect__label {
  display: block; margin-bottom: var(--dl-space-2);
  font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-accent); text-transform: uppercase;
}
.support-expect__body { display: flex; flex-direction: column; gap: var(--dl-space-2); max-width: 680px; }
.support-expect__text { margin: 0; font-size: var(--dl-body-small-size); line-height: var(--dl-body-lh); color: var(--dl-text-body); }
.support-expect__escalation { margin: 0; font-size: var(--dl-body-small-size); color: var(--dl-text-body); }

@media (min-width: 834px) {
  .support-hero { padding: var(--dl-space-6) var(--dl-gutter-tablet) var(--dl-space-5); gap: var(--dl-space-3); }
  .support-routes { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
  .support-expect { padding: var(--dl-space-5) var(--dl-gutter-tablet); }
}
@media (min-width: 1440px) {
  .support-hero { padding: var(--dl-space-7) var(--dl-gutter-desktop) var(--dl-space-6); }
  .support-hero__title { font-size: var(--dl-h1-size); }
  .support-hero__lead { font-size: var(--dl-body-size); }

  .support-routes { padding: var(--dl-space-6) var(--dl-gutter-desktop); }
  .support-routes__grid { flex-direction: row; gap: var(--dl-space-2); }
  .support-routes__card { flex: 1; }

  .support-expect {
    padding: var(--dl-space-6) var(--dl-gutter-desktop);
    display: grid; grid-template-columns: 220px 1fr; gap: var(--dl-space-4);
  }
  .support-expect__label { margin-bottom: 0; }
  .safety-note__text { font-size: var(--dl-body-small-size); }
}

/* ================= Support detail (support-deviceopen-ai.html / support-tool-box.html) ================= */
/* Base + 1440 only — source mockups have no 834 or 1200 tier. */

.support-detail__hero {
  padding: var(--dl-space-4) var(--dl-gutter-mobile) var(--dl-space-3);
  display: flex; flex-direction: column; gap: var(--dl-space-1);
  max-width: 760px;
}
.support-detail__crumb {
  margin: 0; font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--dl-text-secondary); text-transform: uppercase;
}
.support-detail__crumb a { border-bottom: 1px solid currentColor; }
.support-detail__crumb a:hover { color: var(--dl-text-accent); }
.support-detail__eyebrow {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--dl-text-accent); text-transform: uppercase;
}
.support-detail__title {
  font-size: var(--dl-h1-size-mobile); font-weight: var(--dl-weight-semibold);
  line-height: var(--dl-h1-lh); letter-spacing: var(--dl-h1-tracking); text-wrap: pretty;
}

.support-detail__body {
  padding: var(--dl-space-4) var(--dl-gutter-mobile);
  display: flex; flex-direction: column; gap: var(--dl-space-5);
}

/* Categories */
.support-detail__categories { display: flex; flex-direction: column; gap: var(--dl-space-2); }
.support-detail__categories-label {
  margin: 0; font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-accent); text-transform: uppercase; font-weight: var(--dl-weight-regular);
}
.support-detail__list { display: flex; flex-direction: column; }
.support-detail__list-item {
  min-height: var(--dl-target-min); padding: 12px 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-2);
  border-top: var(--dl-border-hairline) solid var(--dl-border-default);
  font-size: var(--dl-body-small-size); color: var(--dl-text-primary);
}
.support-detail__list-item:last-child { border-bottom: var(--dl-border-hairline) solid var(--dl-border-default); }
.support-detail__list-item .flag-required { flex-shrink: 0; text-align: right; }
.support-detail__list-note { flex-shrink: 0; text-align: right; font-size: 13px; color: var(--dl-text-secondary); }

/* Contact block */
.support-detail__contact { display: flex; flex-direction: column; gap: var(--dl-space-2); }
.support-detail__contact-eyebrow {
  font-family: var(--dl-font-mono); font-size: 11px; color: var(--dl-text-accent); text-transform: uppercase; letter-spacing: 0.06em;
}
.support-detail__contact-title { font-size: var(--dl-h3-size-mobile); font-weight: var(--dl-weight-semibold); }
.support-detail__contact-lead { margin: 0; font-size: var(--dl-body-small-size); line-height: var(--dl-body-lh); color: var(--dl-text-body); }
.support-detail__contact-list { padding-left: 18px; font-size: var(--dl-body-small-size); line-height: 1.85; color: var(--dl-text-body); }
.support-detail__contact-list li { margin: 0; list-style: disc; }
.support-detail__contact .btn { width: fit-content; margin-top: var(--dl-space-1); }
.support-detail__contact-note { margin: 0; font-size: var(--dl-body-small-size); color: var(--dl-text-body); }

@media (min-width: 1440px) {
  .support-detail__hero { padding: var(--dl-space-7) var(--dl-gutter-desktop) var(--dl-space-6); gap: var(--dl-space-2); }
  .support-detail__title { font-size: var(--dl-h1-size); }

  .support-detail__body {
    padding: var(--dl-space-6) var(--dl-gutter-desktop);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--dl-space-7); align-items: start;
  }
  .support-detail__contact-title { font-size: var(--dl-h3-size); }
}