/* Support and legal pages share the main site's colors, fonts, and chrome. */
.resource-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.resource-page .site-header {
  position: sticky;
  top: 0;
  background: var(--night);
  backdrop-filter: none;
}

.resource-page .header-nav { gap: 20px; }
.resource-page .header-faq { font-size: .875rem; }
.resource-shell {
  width: min(100% - 2 * var(--gutter), 840px);
  margin-inline: auto;
  padding-block: 32px 88px;
  flex: 1;
}

.resource-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 4px;
  padding-bottom: 24px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--pale);
  font-size: .875rem;
  line-height: 1.5;
}

.resource-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #526176;
  border-bottom: 2px solid transparent;
}
.resource-nav a:hover,
.resource-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: currentColor; }
.resource-nav a[aria-current="page"] { font-weight: 600; }

.legal-document { max-width: 740px; margin-inline: auto; overflow-wrap: break-word; }
.legal-document-head { margin-bottom: 32px; }
.resource-page h1 {
  font: 400 clamp(2.25rem, 4.5vw, 3rem)/1.1 var(--display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 6px;
  margin-top: 24px;
  color: #526176;
  font: .8125rem/1.7 var(--mono);
}
.legal-meta strong { font-weight: 500; }
.legal-document > p { margin-block: 18px; }
.legal-document h2 {
  font: 500 1.5rem/1.3 var(--body);
  letter-spacing: -.015em;
  margin: 36px 0 16px;
}
.legal-document h3 { font: 500 1.125rem/1.4 var(--body); margin: 24px 0 12px; }
.legal-document ul,
.legal-document ol { padding-left: 1.5em; margin-block: 18px; }
.legal-document li + li { margin-top: 12px; }
.legal-document strong { font-weight: 600; }
.legal-document a,
.guide-help a,
.handoff-email { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.legal-document a:hover,
.guide-help a:hover { text-decoration-thickness: 2px; }
.resource-page [id] { scroll-margin-top: calc(var(--header-height) + 24px); }
.legal-document > span[id] { display: block; }
.resource-page .site-footer { margin-top: auto; padding-top: 12px; }
.resource-page .footer-nav { gap: 24px; }
.resource-page .footer-fine { font-size: .8125rem; line-height: 1.6; }
.resource-page .footer-fine .eyebrow { font-size: .8125rem; }

/* The import instructions retain their screenshot, links, and three steps. */
.guide-main { max-width: 960px; }
.guide-intro { padding-block: 16px 40px; }
.guide-eyebrow {
  color: #526176;
  font: .875rem/1.7 var(--mono);
  margin-bottom: 20px;
}
.guide-intro h1 { max-width: 800px; font-size: clamp(2.25rem, 5vw, 3.75rem); }
.guide-deck { max-width: 700px; margin-top: 24px; font-size: 1.125rem; }
.guide-steps { list-style: none; padding: 0; margin: 0; }
.guide-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  padding-block: 36px 40px;
  border-top: 1px solid var(--pale);
}
.guide-number { padding-top: 4px; color: #526176; font: .875rem/1.7 var(--mono); }
.guide-step h2,
.guide-help h2 { font: 500 1.5rem/1.3 var(--body); letter-spacing: -.015em; margin-bottom: 16px; }
.guide-step p { max-width: 760px; margin-bottom: 20px; }
.guide-step section > :last-child { margin-bottom: 0; }
.guide-button { margin-top: 4px; font-size: .9375rem; gap: 14px; }
.guide-figure { margin-block: 28px; }
.guide-figure > a { display: block; background: white; border: 1px solid var(--pale); }
.guide-image-window { display: block; }
.guide-figure img { width: 100%; height: auto; }
.guide-figure figcaption { color: #526176; font-size: .875rem; line-height: 1.6; padding-top: 12px; }
.guide-handoff { margin-block: 28px; padding: 28px; background: var(--night); color: var(--paper); }
.guide-handoff .handoff-label { font: .875rem/1.6 var(--mono); color: var(--pale); margin-bottom: 12px; }
.handoff-email {
  display: inline-block;
  font-size: clamp(1.125rem, 2.6vw, 1.625rem);
  line-height: 1.5;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}
.handoff-email:hover { color: var(--warm); }
.guide-handoff .handoff-attachment { padding-top: 20px; border-top: 1px solid #c8d0da33; font-size: .875rem; margin: 0; }
.guide-help { margin-left: 88px; padding-top: 28px; border-top: 1px solid var(--pale); }
.guide-help p { max-width: 760px; }
.resource-page .inline-arrow { display: inline-block; vertical-align: -.12em; width: 1em; height: 1em; margin-left: .15em; }

@media (max-width: 700px) {
  .resource-shell { padding-block: 20px 56px; }
  .resource-page .site-header { flex-wrap: wrap; gap: 8px 16px; }
  .resource-page .brand { flex: 0 1 110px; }
  .resource-page .brand img { width: 110px; height: 22px; }
  .resource-page .header-cta { min-width: 0; padding-inline: 12px; gap: 12px; }
  .resource-nav { gap: 4px 20px; margin-bottom: 28px; padding-bottom: 16px; }
  .legal-meta { flex-direction: column; gap: 4px; margin-top: 20px; }
  .legal-document h2 { font-size: 1.375rem; }
  .resource-page .footer-main { align-items: flex-start; gap: 20px; }
  .resource-page .footer-nav { gap: 0 20px; }
  .resource-page .footer-fine { gap: 16px; }
  .guide-intro { padding-block: 8px 28px; }
  .guide-eyebrow { margin-bottom: 16px; }
  .guide-deck { font-size: 1.0625rem; margin-top: 20px; }
  .desktop-break { display: none; }
  .guide-step { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 28px; }
  .guide-number { padding: 0; }
  .guide-handoff { padding: 24px 20px; }
  .guide-help { margin-left: 0; }
}

@media (max-width: 640px) {
  /* Preserve the live guide's crop around Export Workouts on phones. */
  .guide-image-window { aspect-ratio: 420 / 200; overflow: hidden; position: relative; }
  .guide-image-window img { position: absolute; max-width: none; width: 403.333333%; height: auto; right: 0; top: -265%; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media print {
  .resource-page { display: block; background: white; color: black; font-size: 11pt; }
  .resource-page .site-header,
  .resource-nav,
  .resource-page .site-footer,
  .resource-page .skip-link { display: none; }
  .resource-shell { width: 100%; padding: 0; }
  .legal-document { max-width: none; }
  .resource-page h1 { font-size: 26pt; }
  .legal-document h2,
  .guide-step h2 { break-after: avoid; }
  .guide-handoff { background: white; color: black; border: 1px solid black; }
  .guide-handoff .handoff-label { color: black; }
  .guide-image-window { aspect-ratio: auto; }
  .guide-image-window img { position: static; width: 100%; }
}