/* PXLTAB shared accessibility and responsive foundations.
   Canonical values live in tokens.css and docs/PXLTAB-DESIGN-SYSTEM.md. */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--type-body);
  line-height: var(--line-body);
}

:where(h1, h2, h3) {
  text-wrap: balance;
  overflow-wrap: anywhere;
}

:where(p, li, summary) { overflow-wrap: break-word; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10001;
  min-height: var(--target-web);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: none;
  font-size: var(--type-body-small);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
  transition: none;
}

.skip-link:focus { transform: translateY(0); box-shadow: var(--elevation-2); }
#main-content { scroll-margin-top: 5rem; }

/* Minimum web hit areas. Small visible labels can remain compact inside them. */
.wordmark { min-height: var(--target-web); }

nav .nav-links a,
.footer-links a {
  min-height: var(--target-web);
  display: inline-flex;
  align-items: center;
}

/* Landing hierarchy */
.landing-page .hero h1 {
  font-size: var(--type-display);
  line-height: var(--line-display);
}

.landing-page .hero h1 .grad {
  background-image: linear-gradient(90deg, #0B7657, #176A84, #5A3EA5, #0B7657);
}

.landing-page .logo-dot,
.content-page .logo-dot { background: #0B0B0C; }

.landing-page :where(.browse, .how, .pricing) h2,
.landing-page .cta h2 {
  font-size: var(--type-section-title);
  line-height: var(--line-heading);
}

.landing-page :where(.hero p, .browse .sub, .how .sub, .pricing .sub, .cta p) {
  font-size: var(--type-body-large);
  line-height: var(--line-body);
}

.landing-page .step h3,
.landing-page .plan-name,
.landing-page .auth-title {
  font-size: var(--type-card-title);
  line-height: 1.35;
}

.landing-page :where(.step p, .plan li) {
  font-size: var(--type-supporting);
  line-height: var(--line-small);
}

.landing-page .nav-search {
  min-height: var(--target-web);
  font-family: var(--sans);
  text-align: left;
}

.landing-page .searchbar { padding-block: 0.125rem; }
.landing-page .searchbar input { min-height: var(--target-web); }

.landing-page :where(.nav-search .kbd, .compare-label, .auth-legal),
.pricing-page .toggle .save {
  font-size: var(--type-caption);
}

/* Keep every readable caption and micro-label at 14px or larger on compact UI. */
.landing-page :is(
  .pill,
  .hero-note,
  .compare-label,
  .compare-caption .c,
  .compare-hint,
  .logostrip p,
  .eyebrow,
  .workflow-label,
  .card .meta .tagpill,
  .step .num,
  .plan-badge,
  .auth-divider,
  .auth-label,
  .auth-error,
  .auth-note,
  .auth-switch,
  .auth-switch button,
  .auth-legal
),
.pricing-page :is(.p-hero .eyebrow, .toggle .save, .tier .badge, .tier .note),
.content-page .eyebrow {
  font-size: var(--type-caption);
}

/* Pricing hierarchy */
.pricing-page .p-hero h1 {
  font-size: var(--type-page-title);
  line-height: var(--line-display);
}

.pricing-page .p-hero p {
  font-size: var(--type-body-large);
  line-height: var(--line-body);
}

.pricing-page :where(.faq h2, .cta-strip h2) {
  font-size: var(--type-section-title);
  line-height: var(--line-heading);
}

.pricing-page .tier .name {
  font-size: var(--type-card-title);
  line-height: 1.35;
}

.pricing-page :where(.tier .desc, .tier li, .faq p) {
  font-size: var(--type-supporting);
  line-height: var(--line-small);
}

.pricing-page .toggle .save { color: var(--color-success); }
.pricing-page .faq summary { min-height: var(--target-web); }

/* Contact, terms, and privacy hierarchy */
.content-page h1 {
  font-size: var(--type-page-title);
  line-height: var(--line-display);
  letter-spacing: -0.04em;
}

.content-page .lead {
  font-size: var(--type-body-large);
  line-height: var(--line-body);
}

.content-page .panel { max-width: var(--measure-reading); }
.content-page .panel h2 {
  font-size: var(--type-subsection-title);
  line-height: 1.3;
}

.content-page nav .nav-links a { padding-inline: 0.375rem; }

@media (max-width: 640px) {
  .landing-page .workflows-grid { grid-template-columns: minmax(0, 1fr); }
  .landing-page .footer-links,
  .pricing-page .footer-links { flex-wrap: wrap; gap: 0 1rem; }
  .landing-page .cta,
  .pricing-page .cta-strip { padding-inline: 1.25rem; }
}

@media (max-width: 560px) {
  .landing-page .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}