/* All customer pages share Plex and the canonical type scale. */

html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: 0;
}
body :where(button, input, select, textarea, text) { font-family: var(--font-sans); }
body input:not([type=checkbox]):not([type=radio]), body textarea {
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  letter-spacing: 0;
}
body :where(h1, h2, h3) {
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
}

body .copy h1, body .story h1 { font-size: var(--text-display); }
body .intro h1, body .set-intro h1, body .stage-title h1,
body .my-welcome h1, body .acct h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
body .set-intro h1 { overflow-wrap: anywhere; }
body .section-heading h2, body .detail-copy h2, body .questions h2,
body .closing h2, body .history-head h2, body .settings-heading h2,
body .panel-title h2, body .detail-layout h2, body .story h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
body .set-intro h2, body .set-intro .compact-set-heading h2,
body .set-intro .desktop-set-heading h2 { font-size: var(--text-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
body .steps h3, body .spotlight-info h3, body .settings-panel h3,
body .answers h3, body .pack-tile h2, body .my-empty h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
}
body .copy .intro, body .section-heading > p, body .steps p,
body .detail-copy p, body .answers p, body .closing p, body .story .description {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: 0;
}
body .intro > p, body .acct-legal, body .acct-note,
body .data-note, body .guide-note { font-size: var(--text-data); line-height: var(--leading-normal); }
body .cta, body .text-link, body .idp, body .btn,
body .collection-tabs button, body .control {
  font-size: var(--text-data);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  font-weight: var(--weight-semibold);
}
body > header.global-header > nav { font-size: var(--text-data); line-height: var(--leading-snug); letter-spacing: 0; }
body .spotlight-price, body .value-summary .total-value strong,
body .stage .current-price, body .stage .attached-tag .current-price,
body .art .current-price, body .story .price strong {
  font-size: var(--text-price);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
body .stage .no-price, body .art .no-price { font-size: var(--text-body); font-weight: var(--weight-regular); }
body .album-slot strong, body .card-item strong, body .set-card strong,
body .my-card-link strong, body .discovery-info strong { font-size: var(--text-data); line-height: var(--leading-snug); }
body .album-slot .card-price, body .album.list .card-price,
body .card-item .card-price, body .my-table .value, body .set-card .card-price,
body .discovery-info b {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* The 3D experience is an exported page; keep its type overrides here. */
body .story :where(.eyebrow, .stage-top, .object-caption, .counter, .price > div,
  .price p, .example, .quiet, .detail-note > span, .detail-note p,
  .scan-state small, .scroll-cue) {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-kicker);
}
body .story .object-caption span + span { font-size: var(--text-label); letter-spacing: 0; }

@media (max-width: 760px) {
  body .history-head .periods { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; }
  body .history-head .periods button { min-width:0; padding:8px 4px; }
  body .set-intro .intro-heading { width: 55%; }
  body .stage .tag-hanger > .attached-tag { width: 132px; }
  body .stage .attached-tag .price-tag { min-height: 70px; }
}
@media (max-width: 360px) {
  body .stage .tag-hanger > .attached-tag { width: 116px; }
  body > header.global-header > a:first-child img { width: 100px; }
  body > header.global-header > nav { margin-left: 8px; }
  body > header.global-header .acm-end { margin-left: auto; }
}