/* Hallmark · macrostructure: Workbench · tone: practical · anchor hue: neutral
 * genre: modern-minimal · theme: existing Air Fetch · nav/footer: existing shared chrome
 * Enrichment: none in hero; real tutorial below · pre-emit critique: P4 H5 E4 S5 R5 V4 */
/* Named tokens are supplied by the site's existing subpages bundle (preview-v1/tokens.css). */
.af-hub { padding-bottom: var(--space-3xl); }
.af-hub h1, .af-hub h2, .af-hub h3, .af-hub h4 { font-style: normal; min-width: 0; overflow-wrap: anywhere; }
.hub-intro { padding-top: var(--space-3xl); text-align: center; }
.hub-eyebrow { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); letter-spacing: .1em; }
.hub-intro h1 { margin-top: var(--space-sm); font-size: var(--text-display); line-height: 1.2; letter-spacing: -.05em; }
.hub-lead { margin-top: var(--space-md); font-size: var(--text-xl); }
.hub-trial { max-width: 42rem; margin: var(--space-sm) auto 0; color: var(--color-muted); font-size: var(--text-sm); }
.hub-release { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-xs); }
.hub-installers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); max-width: 58rem; margin: var(--space-xl) auto var(--space-md); text-align: left; }
.hub-installer { min-width: 0; padding: var(--space-lg); background: var(--color-surface); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-lg); }
.hub-platform { display: inline-flex; align-items: center; min-height: 32px; padding-inline: var(--space-xs); background: var(--color-paper); border-radius: var(--radius-pill); font-size: var(--text-xs); }
.hub-installer h2 { margin-top: var(--space-md); font-size: var(--text-2xl); }
.hub-installer p { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.9; }
.hub-installer .button { width: 100%; margin-top: var(--space-lg); }
.hub-installer small { display: block; margin-top: var(--space-xs); color: var(--color-muted); text-align: center; font-size: var(--text-xs); }
.hub-inline-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: var(--space-lg); row-gap: var(--space-2xs); }
.hub-inline-links a, .hub-text-link { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font-size: var(--text-sm); white-space: nowrap; }
.hub-inline-links a:hover, .hub-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hub-source { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.hub-section { margin-top: var(--space-3xl); }
.hub-extension { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-surface); }
.hub-feature-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; background: var(--color-paper); border-radius: var(--radius-panel); margin-bottom: var(--space-md); }
.hub-feature-icon .icon { width: 28px; height: 28px; }
.hub-extension h2 { margin-top: var(--space-sm); }
.hub-extension-copy > p:not(.hub-eyebrow):not(.hub-note) { max-width: 32rem; margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-md); }
.hub-browsers { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; margin: var(--space-md) 0; padding: 0; }
.hub-browsers li { padding: var(--space-3xs) var(--space-xs); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-xs); }
.hub-extension-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.hub-note { max-width: 32rem; margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.hub-extension-steps { min-width: 0; align-self: center; padding-top: var(--space-lg); border-top: var(--rule-width) solid var(--color-rule); }
.hub-extension-steps > h3 { font-size: var(--text-lg); }
.hub-extension-steps ol { display: grid; gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-md) 0; }
.hub-extension-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-xs); }
.hub-extension-steps li > span { color: var(--color-muted); font-size: var(--text-xs); padding-top: var(--space-3xs); }
.hub-extension-steps h4 { font-size: var(--text-md); line-height: 1.7; }
.hub-extension-steps p { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.hub-section-heading { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-lg); }
.hub-section-heading h2 { margin-top: var(--space-xs); }
.hub-section-heading > p { color: var(--color-muted); font-size: var(--text-sm); }
.hub-learn-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.hub-demo { min-width: 0; margin: 0; }
.hub-demo video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--color-demo-bg); object-fit: contain; border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-panel); }
.hub-demo figcaption { padding-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.hub-lessons { display: grid; min-width: 0; }
.hub-lessons > a { padding: var(--space-md) 0; border-top: var(--rule-width) solid var(--color-rule); }
.hub-lessons > a:first-child { padding-top: 0; border-top: 0; }
.hub-lesson-index { font-size: var(--text-xs); color: var(--color-muted); }
.hub-lessons h3 { margin-top: var(--space-2xs); font-size: var(--text-lg); }
.hub-lessons p { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.hub-lesson-cta { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-xs); white-space: nowrap; }
.hub-lessons a:hover .hub-lesson-cta { text-decoration: underline; text-underline-offset: 4px; }
.hub-help { max-width: 58rem; }
.hub-faq details { border-top: var(--rule-width) solid var(--color-rule); padding-block: var(--space-sm); }
.hub-faq details:last-child { border-bottom: var(--rule-width) solid var(--color-rule); }
.hub-faq summary { min-height: 44px; padding-block: var(--space-xs); padding-right: var(--space-xs); font-size: var(--text-md); cursor: pointer; }
.hub-faq details > p { max-width: 44rem; padding-block: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.hub-faq p a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }
.hub-faq .hub-inline-links { justify-content: flex-start; }
@media (min-width: 48rem) {
  .hub-installers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-installer { padding: var(--space-xl); }
  .hub-section-heading { flex-direction: row; align-items: end; justify-content: space-between; }
  .hub-extension { padding: var(--space-xl); }
}
@media (min-width: 64rem) {
  .hub-extension { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-3xl); }
  .hub-extension-steps { padding-top: 0; padding-left: var(--space-xl); border-top: 0; border-left: var(--rule-width) solid var(--color-rule); }
  .hub-learn-layout { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 47.99rem) {
  .hub-intro { padding-top: var(--space-xl); }
  .hub-lead { font-size: var(--text-lg); }
  .hub-section { margin-top: var(--space-2xl); }
  .hub-extension { padding: var(--space-md); }
  .hub-extension-actions .button { width: 100%; }
  .af-hub { padding-bottom: var(--space-2xl); }
}