/* Hallmark · genre: modern-minimal · design-system: design.md · designed-as-app
 * Families: Product-led Marquee / Long Document / Workbench / Gallery
 * Existing Air Fetch brand and real product media · pre-emit critique: P5 H5 E4 S5 R5 V4 */
/* Hallmark · genre: modern-minimal · design-system: design.md · designed-as-app
 * Shared chrome, type, controls and dialog · pre-emit critique: P5 H5 E4 S5 R5 V4 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 */
:root {
  --color-paper: oklch(100% 0 0);
  --color-surface: oklch(97.8% 0 0);
  --color-surface-2: oklch(94.8% 0 0);
  --color-ink: oklch(17% 0 0);
  --color-muted: oklch(47% 0 0);
  --color-rule: oklch(89% 0 0);
  --color-accent: oklch(17% 0 0);
  --color-accent-ink: oklch(100% 0 0);
  --color-focus: oklch(48% .13 245);
  --color-highlight: oklch(95% .025 165);
  --color-highlight-ink: oklch(36% .065 165);
  --color-error: oklch(45% .16 25);
  --color-scrim: oklch(12% 0 0 / .6);
  --color-shadow: oklch(20% 0 0 / .09);
  --color-transparent: transparent;
  --color-demo-bg: oklch(22% 0 0);
  --color-demo-surface: oklch(29% 0 0);
  --color-demo-panel: oklch(24% 0 0);
  --color-demo-fg: oklch(97% 0 0);
  --color-demo-muted: oklch(76% 0 0);
  --color-demo-rule: oklch(42% 0 0);
  --color-demo-blue: oklch(78% .11 262);
  --color-demo-blue-soft: oklch(36% .055 262);
  --color-demo-green: oklch(82% .1 160);
  --color-demo-green-soft: oklch(34% .045 160);
  --color-demo-shadow: oklch(5% 0 0 / .5);
  --color-demo-dim: oklch(15% 0 0 / .34);
  --color-subscription-canvas: #1c1c1f;
  --color-publish-cyan: oklch(80% .13 205);
  --color-publish-soft: oklch(32% .035 205);
  --color-publish-panel: oklch(20% .012 175);
  --color-extension-waiting: #2563eb;
  --color-extension-waiting-ring: #7dd3fc;
  --color-extension-processing: #0e7490;
  --color-extension-processing-ring: #67e8f9;
  --color-extension-added: #22c55e;
  --color-extension-added-ring: #86efac;
  --font-display: "IBM Plex Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "IBM Plex Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-wordmark: "Arial", sans-serif;
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.8rem, 3.2vw, 2.75rem);
  --text-display: clamp(2.25rem, 4.7vw, 4.25rem);
  --radius-sm: 8px;
  --radius-panel: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-short: 180ms;
  --dur-switch: 250ms;
  --rule-width: 1px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.7 var(--font-body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, a, input, summary { -webkit-tap-highlight-color: var(--color-transparent); }
button, input { font: inherit; }
button, a { color: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }
button { border: 0; }
button, a, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
button:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
button:active, .button:active { transform: translateY(1px); }
button[aria-busy="true"] { cursor: progress; }
button[data-state="error"] { color: var(--color-error); }
button[data-state="success"] { color: var(--color-highlight-ink); }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
h2 { font-size: var(--text-2xl); line-height: 1.35; letter-spacing: -.035em; }
h3 { font-size: var(--text-xl); line-height: 1.4; letter-spacing: -.025em; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: min(1248px, calc(100% - 96px)); margin-inline: auto; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: clip; }
.skip-link { position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: 10; padding: var(--space-xs) var(--space-sm); background: var(--color-paper); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 5; background: var(--color-paper); }
.nav { display: flex; align-items: center; min-height: 84px; gap: var(--space-xl); }
.brand { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; line-height: 1; flex-shrink: 0; }
.brand-lockup { width: 210px; height: auto; }
.desktop-links { display: flex; align-items: center; gap: var(--space-lg); margin-right: auto; }
.desktop-links a { font-size: var(--text-sm); white-space: nowrap; }
.desktop-links a:hover, .footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-actions { display: flex; align-items: center; gap: var(--space-2xs); margin-left: auto; }
.download-short-label { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); line-height: 1; white-space: nowrap; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.button:hover { opacity: .8; }
.button-small { min-height: 40px; padding-inline: var(--space-sm); font-size: var(--text-xs); }
.button-soft { background: var(--color-surface-2); color: var(--color-ink); }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-surface); }
.icon-button:hover { background: var(--color-surface-2); }
.menu-toggle { display: none; }
.mobile-menu { display: grid; gap: var(--space-3xs); padding-block: var(--space-xs) var(--space-md); }
.mobile-menu a { padding: var(--space-xs) 0; font-size: var(--text-sm); white-space: nowrap; }

.footer { border-top: var(--rule-width) solid var(--color-rule); padding-block: var(--space-xl) var(--space-lg); }
.footer-top { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.footer-top > p { color: var(--color-muted); font-size: var(--text-xs); }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin-left: auto; font-size: var(--text-xs); }
.footer-links a, .footer-bottom a { white-space: nowrap; }
.footer-links a { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.footer-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); font-size: 11px; color: var(--color-muted); }
.preview-label { margin-left: auto; }
.media-dialog { padding: 0; width: min(1280px, calc(100vw - 48px)); max-height: 94dvh; border: 0; border-radius: var(--radius-panel); color: var(--color-ink); background: var(--color-paper); }
.media-dialog::backdrop { background: var(--color-scrim); }
.media-dialog.is-download-dialog { width: min(760px, calc(100vw - 32px)); }
.is-download-dialog .dialog-heading { position: sticky; top: 0; z-index: 1; background: var(--color-paper); }
.download-options { padding: var(--space-md); }
.download-release { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs); font-size: var(--text-sm); line-height: 1.7; }
.download-release strong { color: var(--color-ink); font-weight: 500; }
.download-release time, .download-release > span { color: var(--color-muted); font-size: var(--text-xs); }
.download-trial { margin-top: var(--space-2xs); font-size: var(--text-sm); line-height: 1.8; color: var(--color-muted); }
.download-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.download-platforms article { min-width: 0; padding: var(--space-md); border-radius: var(--radius-panel); background: var(--color-paper); }
.download-platform-label { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.download-platforms h3 { font-size: var(--text-lg); line-height: 1.5; margin-top: var(--space-2xs); }
.download-platforms p { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.9; }
.download-platforms .button { width: 100%; margin-top: var(--space-md); font-size: var(--text-xs); padding-inline: var(--space-xs); white-space: nowrap; }
.download-platforms small { display: block; text-align: center; font-size: 11px; color: var(--color-muted); margin-top: var(--space-xs); }
.download-resources { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.download-resources .text-link { font-size: var(--text-xs); }
.download-source { font-size: 11px; color: var(--color-muted); line-height: 1.8; }

.dialog-heading { position: sticky; top: 0; z-index: 1; background: var(--color-paper); }
.download-options { padding: var(--space-md); }
.download-release { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs); font-size: var(--text-sm); line-height: 1.7; }
.download-release strong { color: var(--color-ink); font-weight: 500; }
.download-release time, .download-release > span { color: var(--color-muted); font-size: var(--text-xs); }
.download-trial { margin-top: var(--space-2xs); font-size: var(--text-sm); line-height: 1.8; color: var(--color-muted); }
.download-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.download-platforms article { min-width: 0; padding: var(--space-md); border-radius: var(--radius-panel); background: var(--color-paper); }
.download-platform-label { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.download-platforms h3 { font-size: var(--text-lg); line-height: 1.5; margin-top: var(--space-2xs); }
.download-platforms p { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.9; }
.download-platforms .button { width: 100%; margin-top: var(--space-md); font-size: var(--text-xs); padding-inline: var(--space-xs); white-space: nowrap; }
.download-platforms small { display: block; text-align: center; font-size: 11px; color: var(--color-muted); margin-top: var(--space-xs); }
.download-resources { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.download-resources .text-link { font-size: var(--text-xs); }
.download-source { font-size: 11px; color: var(--color-muted); line-height: 1.8; }
@media (max-width: 600px) {
  .hero-release { gap: 0 var(--space-xs); }
  .hero-release > span { flex-basis: 100%; }
  .showcase-mode { flex-wrap: wrap; font-size: 10px; }
  .showcase-mode > span { flex-basis: 100%; }
  .showcase-mode > div { width: 100%; }
  .showcase-mode button { flex: 1; padding-inline: var(--space-2xs); }
  .download-options { padding: var(--space-sm); }
  .download-platforms { grid-template-columns: minmax(0, 1fr); }
  .download-platforms article { padding: var(--space-sm); }
  .download-platforms .button { margin-top: var(--space-xs); }
}
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.dialog-heading h2 { font-size: var(--text-md); }
.dialog-content { background: var(--color-surface); }
.dialog-content img, .dialog-content video { width: 100%; max-height: 77dvh; object-fit: contain; }
#dialog-error { padding: var(--space-md); color: var(--color-error); }
body:has(.media-dialog[open]) { overflow-y: hidden; }

.text-link { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0; background: var(--color-transparent); color: var(--color-ink); font-size: var(--text-sm); line-height: 1; white-space: nowrap; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
/* Shared responsive contract: phone, tablet and desktop. */
.desktop-links a { display: inline-flex; align-items: center; min-height: 44px; }
.desktop-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.footer-links a, .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
.button-small { min-height: 44px; }
.mobile-menu { max-height: calc(100dvh - 84px); overflow-y: auto; }
.dialog-heading { position: sticky; top: 0; z-index: 2; background: var(--color-paper); }
.media-dialog { max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))); overscroll-behavior: contain; }
.site-header { padding-top: env(safe-area-inset-top); }
.footer { padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)); }
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }
  .nav { gap: var(--space-lg); }
  .desktop-links { gap: var(--space-md); }
}
@media (max-width: 1024px) {
  .nav { min-height: 72px; }
  .desktop-links { display: none; }
  .menu-toggle { display: grid; }
  .footer-links { width: 100%; margin-left: 0; }
}
@media (max-width: 767px) {
  .wrap { width: calc(100% - 32px); }
  .brand-lockup { width: 160px; }
  .nav { gap: var(--space-xs); }
  .nav-actions > .button { padding-inline: var(--space-xs); font-size: 11px; min-height: 44px; }
  .nav-actions > .button .icon { display: none; }
  .media-dialog { width: calc(100vw - 24px); }
  .dialog-heading { padding: var(--space-xs); }
  .dialog-heading h2 { font-size: var(--text-sm); }
  .download-options { padding: var(--space-sm); }
  .download-platforms { grid-template-columns: minmax(0, 1fr); }
  .download-platforms article { padding: var(--space-sm); }
  .download-platforms .button { margin-top: var(--space-xs); }
  .footer-links { gap: var(--space-xs) var(--space-md); }
  .preview-label { width: 100%; margin-left: 0; }
}
@media (max-width: 360px) {
  .brand-lockup { width: 150px; }
  .download-full-label { display: none; }
  .download-short-label { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  button:active, .button:active { transform: none; }
}

@media (max-width: 414px) {
 .download-full-label { display: none; }
 .download-short-label { display: inline; }
 .nav-actions { flex: 0 0 auto; }
}
.desktop-links a, .footer-links a { min-width: 44px; }

.af-page { --af-reading: 76ch; }
.af-main { padding-bottom: var(--space-3xl); min-height: 60dvh; }
.af-main > * { min-width: 0; }
.af-page h1 { font-size: clamp(2rem, 4.3vw, 3.5rem); line-height: 1.25; letter-spacing: -.045em; }
.af-page h2 { font-size: clamp(1.4rem, 2.5vw, 2.1rem); line-height: 1.4; }
.af-page h3 { font-size: var(--text-lg); line-height: 1.5; }
.af-page h4 { font-size: var(--text-md); line-height: 1.5; }
.af-page .serif { font: inherit; }
.af-page p, .af-page li { overflow-wrap: anywhere; }
.af-main p { color: var(--color-muted); line-height: 1.9; }
.af-main h2 + p, .af-main h3 + p, .af-main h4 + p { margin-top: var(--space-xs); }
.af-main ul, .af-main ol { padding-left: var(--space-md); color: var(--color-muted); line-height: 1.9; }
.af-main a:not(.button):not(.btn-primary):not(.btn-secondary):not(.btn):not(.download-button):not(.primary-link):not(.secondary-link) { text-underline-offset: 5px; }
.af-main a:hover { text-decoration: underline; }
.af-page .eyebrow, .af-kicker { display: block; font-size: var(--text-xs); color: var(--color-muted); line-height: 1.8; margin-bottom: var(--space-md); }
.af-page .eyebrow span + span::before { content: ' / '; margin-inline: var(--space-2xs); }
.af-page .hero, .af-page .guide-hero, .help-hero, .changelog-hero, .works-hero { padding-block: var(--space-2xl) var(--space-xl); }
.af-page .hero-copy, .guide-copy, .guide-hero-copy, .help-hero, .changelog-hero, .af-form-intro { max-width: 960px; margin-inline: auto; text-align: center; }
.af-page .lead, .af-page .sub, .guide-lead, .help-lead, .changelog-lead { max-width: var(--af-reading); margin: var(--space-md) auto 0; font-size: var(--text-lg); line-height: 1.9; color: var(--color-muted); }
.af-back-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: var(--space-2xs); margin-bottom: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.af-back-link .icon { transform: rotate(180deg); width: 16px; height: 16px; }
.actions, .af-hero-actions, .meta, .quick-strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.af-hero-actions, .hero-copy .meta, .hero-copy > .actions, .guide-hero-copy > .actions, .help-hero .quick-strip, .changelog-hero .quick-strip { justify-content: center; }
.af-page .chip, .zip-meta span, .community-meta { display: inline-flex; align-items: center; min-height: 32px; padding: var(--space-3xs) var(--space-xs); background: var(--color-surface); color: var(--color-muted); border-radius: var(--radius-pill); font-size: var(--text-xs); line-height: 1.6; }
.af-page a.chip { min-height: 44px; white-space: nowrap; }
.af-page .btn, .af-page .btn-primary, .af-page .btn-secondary, .af-page .primary-link, .af-page .secondary-link, .af-page .download-button, .copy-btn, .refresh-feedback, .upload-button {
 display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 44px; max-width: 100%; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.25; white-space: nowrap; text-decoration: none; transition: opacity var(--dur-short) var(--ease-out);
}
.af-page .btn-secondary, .af-page .secondary-link, .af-page .btn.secondary, .af-page .btn-ghost, .af-page .download-button--outline, .af-page .download-button--hero-secondary, .refresh-feedback, .upload-button { background: var(--color-surface-2); color: var(--color-ink); }
.af-page .btn:hover, .af-page .btn-primary:hover, .af-page .btn-secondary:hover, .af-page .primary-link:hover, .af-page .secondary-link:hover, .af-page .download-button:hover, .copy-btn:hover, .refresh-feedback:hover, .upload-button:hover { opacity: .78; text-decoration: none; }
.af-page .button:disabled, .af-page button:disabled { cursor: not-allowed; }
.af-page .section, .help-section, .release-section, .download-section, .download-next, .download-troubleshoot, .af-download-install { padding-block: var(--space-xl); border-top: var(--rule-width) solid var(--color-rule); }
.section-heading, .download-section__head, .download-next__head, .download-troubleshoot__intro { max-width: var(--af-reading); margin-bottom: var(--space-lg); }
.section-heading p { margin-top: var(--space-sm); }
.detail-grid, .provider-grid, .policy-grid, .callout-grid, .release-grid, .community-grid, .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.detail-grid > article, .provider, .policy-section, .guide-card, .zip-card, .tip-card, .trouble-card, .step-card, .proof-card, .af-steps > article, .help-card, .action-card, .faq-item, .af-current-release, .next-panel, .release-summary, .timeline-card, .community-card, .security-note, .download-support-box { min-width: 0; padding: var(--space-lg); border-radius: var(--radius-panel); background: var(--color-surface); }
.detail-grid > article h2 { font-size: var(--text-xl); }
.detail-grid .af-related { grid-column: 1 / -1; background: var(--color-paper); padding: var(--space-lg) 0 0; }
.af-steps, .steps, .step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.af-steps h3, .step h3, .step-card h3 { margin-top: var(--space-sm); }
.step-index, .card-icon, .step-number, .provider-label, .download-step-index, .download-diagnostic-index { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; color: var(--color-muted); font-size: var(--text-xs); }
.af-steps .step-index, .step .step-index, .step-card .step-index { background: var(--color-paper); border-radius: var(--radius-pill); }
.af-steps p { font-size: var(--text-sm); }
.af-condition, .security-note, .policy-note { padding: var(--space-md); margin-top: var(--space-md); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.9; }
.af-page code { font: inherit; font-size: var(--text-sm); background: var(--color-surface-2); padding: var(--space-3xs); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.af-contents { padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-panel); }
.af-contents > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; white-space: nowrap; font-size: var(--text-sm); }
.af-contents > summary::-webkit-details-marker { display: none; }
.af-contents > summary span { font-size: 22px; }
.af-contents[open] > summary span { transform: rotate(45deg); }
.af-contents nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-md); padding-top: var(--space-xs); }
.af-contents a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); min-width: 0; min-height: 44px; font-size: var(--text-xs); white-space: nowrap; }
.af-contents .icon { width: 14px; height: 14px; }
/* Real product media, with controls outside the image. */
.af-page .stage, .guide-stage, .tutorial-video-card { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-panel); }
.stage-shell, .stage-shell-wrap, .tutorial-video-frame { position: relative; min-width: 0; }
.af-page .stage video, .tutorial-video-frame video, .download-product-demo video { display: block; width: 100%; max-height: 75dvh; aspect-ratio: 16/9; object-fit: contain; background: var(--color-demo-bg); border-radius: var(--radius-sm); }
.af-stage-heading, .stage-copy, .tutorial-video-copy { display: flex; align-items: start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.af-stage-heading > span, .stage-kicker { color: var(--color-muted); font-size: var(--text-xs); }
.af-stage-heading h2, .stage-title, .tutorial-video-copy h2 { font-size: var(--text-lg); }
.stage-copy p { font-size: var(--text-sm); }
.stage-status { display: none; }
.af-page .stage-note, .guide-stage-copy, .download-product-demo figcaption { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-sm); line-height: 1.8; }
.quality-switcher { position: static; display: flex; gap: var(--space-2xs); padding-top: var(--space-xs); justify-content: flex-end; }
.quality-switcher button { background: var(--color-paper); color: var(--color-muted); min-width: 64px; min-height: 44px; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); white-space: nowrap; }
.quality-switcher button.is-active { color: var(--color-paper); background: var(--color-ink); }
.guide-stage img { width: 100%; border-radius: var(--radius-sm); }
.guide-stage-copy strong { color: var(--color-ink); font-weight: 500; }
.guide-stage-copy p { margin-top: var(--space-2xs); }
/* Install and provider guides. */
.guide-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: start; gap: var(--space-xl); }
.guide-hero .guide-stage { grid-column: 1 / -1; }
.af-deepseek-kimi-api .guide-hero { display: block; }
.guide-copy { text-align: left; }
.guide-copy .af-back-link { justify-content: start; }
.guide-card { margin-top: var(--space-2xs); }
.guide-card h2 { font-size: var(--text-xl); }
.mini-flow { margin-top: var(--space-md); }
.mini-flow > div { padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); }
.download-panel { margin-top: var(--space-md); }
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: var(--space-md); }
.steps ul { font-size: var(--text-sm); }
.zip-meta { display: grid; gap: var(--space-2xs); margin-top: var(--space-md); }
.zip-meta span { border-radius: var(--radius-sm); }
.tutorial-video-card { margin-top: 0; }
.tutorial-video-copy { display: block; }
.provider-label { margin-bottom: var(--space-xs); background: var(--color-paper); border-radius: var(--radius-pill); }
.provider a { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; margin-top: var(--space-md); font-size: var(--text-sm); white-space: nowrap; }
.step { min-width: 0; padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); }
.af-deepseek-kimi-api .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.policy-section h2 { font-size: var(--text-xl); }
.policy-section ul { margin-bottom: 0; }
.af-browser-extension-privacy .hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--space-xl); align-items: start; }
.af-browser-extension-privacy .hero-copy { text-align: left; }
.af-browser-extension-privacy h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
.hero-card { padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-panel); }
.hero-card h2 { font-size: var(--text-xl); }
.hero-card p { font-size: var(--text-sm); }
.contact { margin-top: var(--space-md); overflow-wrap: anywhere; }
/* Workbench: purchase, status and forms. */
.af-purchase .hero { padding-bottom: var(--space-lg); }
.af-purchase-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--space-xl); align-items: start; max-width: 1060px; margin: 0 auto; }
.af-page .pricing-card, .form-card, .status-card { min-width: 0; padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-panel); }
.af-page .pricing-card { position: sticky; top: 108px; }
.af-page .pricing-card h2, .form-card h2, .status-card h2 { font-size: var(--text-xl); }
.summary { padding: var(--space-md); margin-top: var(--space-md); background: var(--color-paper); border-radius: var(--radius-sm); color: var(--color-ink); font-size: var(--text-lg); line-height: 1.8; }
.summary strong { font-weight: 500; }
.af-page form { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.af-page label, .field-label { display: grid; gap: var(--space-2xs); min-width: 0; font-size: var(--text-sm); color: var(--color-ink); }
.af-page input:not([type="checkbox"]):not([type="hidden"]), .af-page select, .af-page textarea { width: 100%; min-width: 0; min-height: 48px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; scroll-margin-block: 110px 24px; }
.af-page input::placeholder, .af-page textarea::placeholder { color: var(--color-muted); opacity: 1; }
.af-page textarea { min-height: 200px; resize: vertical; }
.af-page input:focus, .af-page select:focus, .af-page textarea:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.af-page input:disabled { background: var(--color-surface); color: var(--color-muted); opacity: 1; }
.af-page select { color-scheme: light; }
.af-page option { background: var(--color-paper); color: var(--color-ink); }
.row, .identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.hidden-field { display: none !important; }
.msg { min-height: 0; font-size: var(--text-sm); line-height: 1.8; overflow-wrap: anywhere; }
.msg:empty { display: none; }
.msg:not(:empty) { padding: var(--space-sm); background: var(--color-paper); border-radius: var(--radius-sm); }
.msg.error { color: var(--color-error); border: 1px solid currentColor; }
.msg.success { color: var(--color-highlight-ink); background: var(--color-highlight); }
.hint, .field-hint, .privacy-note, .note, .code-label { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.8; }
.af-success .af-main { max-width: 1000px; }
.af-success .hero { padding-bottom: var(--space-lg); }
.af-success .status-card { margin-bottom: var(--space-lg); }
.status { margin-top: var(--space-md); padding: var(--space-sm); background: var(--color-paper); border-radius: var(--radius-sm); line-height: 1.9; }
[data-order-state="error"] .status { color: var(--color-error); }
[data-order-state="success"] .status { background: var(--color-highlight); color: var(--color-highlight-ink); }
.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); padding-block: var(--space-lg); }
.meta-label { color: var(--color-muted); font-size: var(--text-xs); }
.meta-value { margin-top: var(--space-2xs); font-size: var(--text-sm); overflow-wrap: anywhere; }
.codes { display: none; padding: var(--space-md); margin-block: var(--space-md); background: var(--color-paper); border-radius: var(--radius-sm); }
.codes .code-label { margin-block: var(--space-xs); }
.code-item { padding-block: var(--space-sm); font-size: var(--text-lg); color: var(--color-ink); overflow-wrap: anywhere; }
.copy-btn { margin-top: var(--space-sm); }
.query-panel { margin-top: var(--space-md); }
.query-title { margin-bottom: var(--space-xs); font-size: var(--text-sm); }
.status-card .note { margin-top: var(--space-md); }
.af-form-intro { padding-block: var(--space-xl); }
.af-form-intro + .hero { padding-top: 0; }
.af-feedback-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-xl); align-items: start; }
.af-feedback-layout .support-form { margin-top: 0; padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-panel); }
.support-prep { padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); }
.support-prep h2 { font-size: var(--text-xl); }
.support-prep p, .support-prep-list { font-size: var(--text-sm); }
.support-prep-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); padding-left: var(--space-sm); margin-block: var(--space-md); }
.support-prep-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); text-decoration: underline; }
.upload-row, .feedback-feed-head, .feedback-post-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.upload-dropzone { padding: var(--space-md); border: 1px dashed var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); font-size: var(--text-xs); color: var(--color-muted); line-height: 1.9; }
.upload-dropzone.is-dragover { outline: 2px solid var(--color-focus); }
.af-page .file-input { position: absolute; width: 1px !important; height: 1px; padding: 0 !important; min-height: 0 !important; clip-path: inset(50%); overflow: clip; }
.file-list { display: grid; gap: var(--space-2xs); padding: 0 !important; margin: 0; list-style: none; }
.file-list li { display: flex; align-items: start; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-2xs); }
.file-list li span:first-child { overflow-wrap: anywhere; min-width: 0; }
.file-list li span:last-child { white-space: nowrap; }
.submit-row { display: grid; gap: var(--space-sm); }
.feedback-feed { padding-bottom: var(--space-xl); }
.feedback-feed-head { margin-bottom: var(--space-md); }
.feedback-feed-head h2 { font-size: var(--text-xl); }
.feedback-feed-head p { font-size: var(--text-sm); }
.feedback-list { display: grid; gap: var(--space-sm); }
.feedback-post, .feedback-empty { padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-panel); }
.feedback-post-head { font-size: var(--text-sm); }
.feedback-post-head time { font-size: var(--text-xs); color: var(--color-muted); }
.feedback-post-message { white-space: pre-wrap; margin-top: var(--space-sm); }
.feedback-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.feedback-images img { width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: var(--radius-sm); }
.af-waitlist .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.af-waitlist .hero-copy { text-align: left; padding-top: var(--space-sm); }
.af-waitlist .hero-copy > .actions, .af-waitlist .hero-copy .meta { justify-content: start; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.af-page .check-item { display: flex; flex-direction: row; gap: var(--space-2xs); align-items: center; min-height: 44px; padding: var(--space-2xs); border-radius: var(--radius-sm); background: var(--color-paper); font-size: var(--text-xs); }
.check-item input { font-size: 16px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--color-ink); }
.proof-list { display: grid; gap: var(--space-xs); margin-top: var(--space-md); color: var(--color-muted); }
/* Help library. */
.help-grid, .action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.help-card, .action-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); }
.help-card p, .action-card p { font-size: var(--text-sm); }
.help-card .card-icon { margin-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.card-links { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.card-links a, .action-card-cta { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; min-width: 44px; font-size: var(--text-xs); white-space: nowrap; }
.troubleshoot-panel, .stash-guide, .contact-panel, .community-panel { padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-panel); margin-bottom: var(--space-md); }
.troubleshoot-panel .support-prep { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); }
.troubleshoot-list, .stash-guide__steps { list-style: none; padding: 0 !important; margin-bottom: 0; }
.troubleshoot-list li, .stash-guide__steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.stash-guide__intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.stash-logo { width: 44px; height: 44px; margin-bottom: var(--space-sm); border-radius: var(--radius-pill); }
.stash-guide__tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.setup-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.setup-step { min-width: 0; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); }
.setup-step--wide { grid-column: 1 / -1; }
.setup-step__head { display: flex; align-items: start; gap: var(--space-sm); }
.setup-image { margin-top: var(--space-md); }
.setup-image img { width: 100%; max-height: 600px; object-fit: contain; border-radius: var(--radius-sm); }
.setup-image figcaption { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-xs); }
.faq-item { padding: var(--space-md); }
.faq-item summary { display: flex; justify-content: space-between; align-items: start; gap: var(--space-sm); min-height: 44px; cursor: pointer; list-style: none; font-size: var(--text-sm); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex-shrink: 0; font-size: 20px; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { font-size: var(--text-sm); margin-top: var(--space-xs); }
.contact-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.contact-panel h2, .community-head h2 { font-size: var(--text-xl); }
.community-head { margin-bottom: var(--space-md); }
.community-card { background: var(--color-paper); display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: var(--space-md); align-items: center; }
.community-card p { font-size: var(--text-sm); }
.community-meta { margin-top: var(--space-sm); }
.qr-frame { padding: var(--space-xs); background: var(--color-surface); border-radius: var(--radius-sm); }
.qr-frame img { width: 100%; }
/* Release notes. */
.af-current-release { margin-bottom: var(--space-xl); }
.af-current-release h2 { font-size: var(--text-display); }
.release-summary { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); }
.summary-kicker { font-size: var(--text-xs); }
.summary-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.summary-stats strong { display: block; font-size: var(--text-xl); color: var(--color-ink); font-weight: 500; }
.timeline-item { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.timeline-item:first-child { padding-top: 0; }
.timeline-item:last-child { border: 0; padding-bottom: 0; }
.timeline-item strong { font-weight: 500; }
.timeline-item p { margin-top: var(--space-xs); font-size: var(--text-sm); }
.timeline-item time { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-sm); }
.next-panel { margin-top: var(--space-xl); }
/* Download: product tutorial and current installers. */
.download-shell { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
.download-hero { padding-block: var(--space-2xl) var(--space-xl); text-align: center; }
.download-hero__layout { display: block; }
.download-hero h1 span { display: inline; }
.download-product-status { margin-bottom: var(--space-md); font-size: var(--text-xs); }
.download-hero__lead { max-width: 72ch; margin: var(--space-md) auto 0; font-size: var(--text-lg); }
.download-actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-md); }
.download-hero .download-actions { justify-content: center; }
.af-release-line { margin-top: var(--space-md); font-size: var(--text-xs); }
.download-demo { margin-bottom: var(--space-xl); }
.download-demo__intro { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-sm); }
.download-product-demo { padding: var(--space-md); border-radius: var(--radius-panel); background: var(--color-surface); }
.download-product-demo figcaption { display: flex; align-items: start; justify-content: space-between; gap: var(--space-md); }
.download-demo__route { display: flex; gap: var(--space-md); flex-wrap: wrap; list-style: none; margin: 0; padding: 0 !important; font-size: var(--text-xs); }
.af-download-install .download-platforms { margin: 0; }
.af-download-install .download-platforms article { background: var(--color-surface); }
.download-workflow, .download-diagnostic-steps { margin: 0; padding: 0 !important; list-style: none; }
.download-workflow li, .download-diagnostic-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-md); border-top: 1px solid var(--color-rule); padding-block: var(--space-md); }
.download-queue, .download-troubleshoot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); align-items: start; }
.download-queue__figure { padding: var(--space-sm); border-radius: var(--radius-panel); background: var(--color-surface); }
.download-queue__figure img { border-radius: var(--radius-sm); }
.download-queue__figure figcaption { font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-xs); }
.download-queue__points { margin-top: var(--space-md); }
.download-queue__points article { padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.download-queue__points p { font-size: var(--text-sm); }
.download-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.download-index a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); white-space: nowrap; }
/* Real works: visible tap targets, native modal and lazy previews. */
.works-hero h1 span { margin-left: var(--space-sm); }
.works-kicker, .works-section-label { font-size: var(--text-xs); color: var(--color-muted); }
.works-kicker { margin-bottom: var(--space-md); }
.works-hero__foot { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-lg); }
.works-hero__intro { max-width: 64ch; }
.works-hero__stats { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.works-section__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); }
.works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
.work { min-width: 0; }
.work--wide { grid-column: span 2; }
.work__media { position: relative; border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; overflow: clip; aspect-ratio: 16/10; }
.work--portrait .work__media { aspect-ratio: 4/5; }
.work__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.work__caption { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--space-xs); margin-top: var(--space-sm); align-items: baseline; }
.work__index, .work__meta { font-size: var(--text-xs); color: var(--color-muted); }
.work__caption .work__title { font-size: var(--text-md); }
.work__meta { grid-column: 2; margin-top: var(--space-2xs); }
.af-work-play { position: absolute; right: var(--space-xs); bottom: var(--space-xs); display: flex; align-items: center; justify-content: center; min-height: 44px; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xs); border-radius: var(--radius-pill); }
.work__media:hover .af-work-play { background: var(--color-surface-2); }
.work-player { padding: 0; width: min(1280px, calc(100vw - 32px)); max-width: none; max-height: 92dvh; border: 0; border-radius: var(--radius-panel); background: var(--color-paper); color: var(--color-ink); }
.work-player::backdrop { background: var(--color-scrim); }
.work-player__header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); background: var(--color-paper); }
.work-player__title { min-width: 0; font-size: var(--text-sm); }
.work-player__close { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); font-size: 26px; }
.work-player__video { display: block; width: 100%; max-height: calc(92dvh - 72px); background: var(--color-demo-bg); object-fit: contain; }
body:has(.work-player[open]) { overflow-y: hidden; }
/* Tablet and compact desktop. */
@media (min-width: 768px) and (max-width: 1024px) {
 .help-grid, .action-grid, .af-steps, .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .work--wide { grid-column: auto; }
 .af-purchase-layout, .af-feedback-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-md); }
 .af-page .pricing-card, .form-card, .af-feedback-layout .support-form { padding: var(--space-md); }
 .af-purchase .row, .af-feedback-layout .identity-grid { grid-template-columns: minmax(0, 1fr); }
 .community-card { grid-template-columns: minmax(0, 1fr); }
 .qr-frame { max-width: 180px; }
 .af-contents nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
 .download-shell { width: calc(100% - 64px); }
 .community-card { grid-template-columns: minmax(0, 1fr); }
 .qr-frame { max-width: 180px; }
}
/* Phone layouts use a complete single column, including forms and media controls. */
@media (max-width: 767px) {
 .af-main { padding-bottom: var(--space-xl); }
 .af-page .hero, .af-page .guide-hero, .help-hero, .changelog-hero, .works-hero { padding-block: var(--space-xl) var(--space-lg); }
 .af-page h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
 .af-page .lead, .af-page .sub, .guide-lead, .help-lead, .changelog-lead, .download-hero__lead { font-size: var(--text-sm); }
 .af-page .hero-copy, .guide-copy, .guide-hero-copy, .help-hero, .changelog-hero, .af-form-intro { text-align: left; }
 .af-hero-actions, .hero-copy .meta, .hero-copy > .actions, .guide-hero-copy > .actions, .help-hero .quick-strip, .changelog-hero .quick-strip { justify-content: start; }
 .af-back-link { justify-content: start; }
 .af-page .section, .help-section, .release-section, .download-section, .download-next, .download-troubleshoot, .af-download-install { padding-block: var(--space-lg); }
 .detail-grid, .provider-grid, .policy-grid, .callout-grid, .release-grid, .community-grid, .faq-grid, .af-steps, .steps, .step-grid, .help-grid, .action-grid, .setup-guide, .stash-guide__intro, .stash-guide__tips, .af-purchase-layout, .af-feedback-layout, .af-waitlist .hero, .guide-hero, .af-browser-extension-privacy .hero, .download-queue, .download-troubleshoot__grid, .af-deepseek-kimi-api .step-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
 .detail-grid > article, .provider, .policy-section, .guide-card, .zip-card, .tip-card, .trouble-card, .step-card, .proof-card, .af-steps > article, .help-card, .action-card, .faq-item, .af-current-release, .next-panel, .release-summary, .timeline-card, .community-card, .security-note, .download-support-box, .af-page .pricing-card, .form-card, .status-card, .hero-card, .troubleshoot-panel, .stash-guide, .contact-panel, .community-panel, .af-feedback-layout .support-form { padding: var(--space-md); }
 .af-page .pricing-card { position: static; }
 .af-page .row, .identity-grid, .check-grid, .meta-grid { grid-template-columns: minmax(0, 1fr); }
 .af-page .stage, .guide-stage, .tutorial-video-card { padding: var(--space-sm); margin-top: var(--space-lg); }
 .af-stage-heading, .stage-copy, .tutorial-video-copy, .download-product-demo figcaption { display: block; }
 .af-stage-heading h2 { margin-top: var(--space-2xs); }
 .af-page .stage video, .tutorial-video-frame video, .download-product-demo video { max-height: 65dvh; min-height: 0; aspect-ratio: 16/9; }
 .quality-switcher { justify-content: start; }
 .af-contents { padding: var(--space-xs) var(--space-sm); }
 .af-contents nav { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
 .af-contents a { font-size: var(--text-xs); }
 .af-page .eyebrow { margin-bottom: var(--space-sm); }
 .af-page .btn, .af-page .btn-primary, .af-page .btn-secondary, .af-page .primary-link, .af-page .secondary-link, .af-page .download-button, .copy-btn, .refresh-feedback, .upload-button, .af-page .button { padding-inline: var(--space-sm); font-size: var(--text-xs); }
 .actions, .af-hero-actions, .meta, .quick-strip { gap: var(--space-2xs); }
 .af-page .eyebrow span { display: block; }
 .af-page .eyebrow span + span::before { display: none; }
 .provider a { font-size: var(--text-xs); }
 .af-form-intro { padding-block: var(--space-lg); }
 .af-feedback-layout .support-form { margin-top: var(--space-sm); }
 .af-feedback-layout .support-prep { padding: var(--space-sm) 0; }
 .af-page textarea { min-height: 210px; }
 .file-list li { flex-direction: column; gap: 0; }
 .troubleshoot-panel .support-prep, .contact-panel { display: block; }
 .contact-panel > a { margin-top: var(--space-md); }
 .community-card { grid-template-columns: minmax(0, 1fr); }
 .qr-frame { max-width: 200px; }
 .setup-step--wide { grid-column: auto; }
 .download-shell { width: calc(100% - 32px); }
 .download-hero { padding-block: var(--space-xl) var(--space-lg); text-align: left; }
 .download-hero .download-actions { justify-content: start; }
 .download-product-demo { padding: var(--space-sm); }
 .download-demo__route { margin-top: var(--space-xs); gap: var(--space-sm); }
 .download-index { grid-template-columns: minmax(0, 1fr); }
 .download-workflow li, .download-diagnostic-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-xs); }
 .works-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
 .work--wide { grid-column: auto; }
 .work--portrait .work__media { aspect-ratio: 4/5; max-height: 75dvh; }
 .works-hero__foot, .works-section__head { flex-direction: column; align-items: start; gap: var(--space-sm); }
 .works-hero h1 span { margin-left: var(--space-xs); }
 .work-player { max-height: calc(100dvh - 24px); }
 .work-player__header { padding-inline: var(--space-xs); }
 .work-player__video { max-height: calc(100dvh - 96px); }
}
@media (prefers-reduced-motion: reduce) {
 .af-contents[open] > summary span { transform: none; }
}
/* Form state consistency and activation-code readability. */
.af-page input:not(:disabled):not([type="checkbox"]):hover, .af-page select:not(:disabled):hover, .af-page textarea:not(:disabled):hover { border-color: var(--color-muted); }
.af-page input:user-invalid, .af-page textarea:user-invalid { border-color: var(--color-error); }
.af-page input:disabled, .af-page select:disabled, .af-page textarea:disabled { cursor: not-allowed; }
.codes .code { padding-block: var(--space-sm); color: var(--color-ink); font-size: var(--text-lg); overflow-wrap: anywhere; }
.af-contents > summary span { font-size: 0; transform: none !important; }
.af-contents > summary span::before { content: '+'; font-size: 22px; }
.af-contents[open] > summary span::before { content: '−'; }
.af-page .msg, .af-page .msg:empty { display: block; min-height: 1.8em; }
.af-page .msg:empty { padding: 0; background: var(--color-transparent); }

.media-dialog form.download-registration[hidden] { display: none; }
.media-dialog form.download-registration { display: block; box-sizing: border-box; padding: clamp(24px, 5vw, 44px); max-width: 580px; margin: 0 auto; }
.download-registration__step { color: var(--color-muted); font-size: 12px; margin-bottom: 12px; }
.download-registration h3 { margin: 0; font-size: clamp(26px, 5vw, 36px); line-height: 1.4; letter-spacing: -.04em; }
.download-registration__intro { color: var(--color-muted); font-size: 14px; line-height: 1.8; margin: 12px 0 24px; }
.download-registration > label { display: block; margin: 18px 0 8px; font-size: 14px; font-weight: 600; }
.download-registration > input, .download-registration__code-row input { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-paper); color: var(--color-ink); font: inherit; font-size: 16px; }
.download-registration input:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.download-registration .download-registration__consent { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0; color: var(--color-muted); font-size: 12px; line-height: 1.8; font-weight: 400; }
.download-registration__consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-ink); }
.download-registration__consent a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.download-registration > .button { width: 100%; min-height: 48px; }
.download-registration > .button:disabled { opacity: .6; cursor: wait; }
.download-registration__error { margin-bottom: 16px; color: var(--color-error, #b42318); font-size: 14px; line-height: 1.7; }
.download-registration__note { margin: 14px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.8; text-align: center; }

.download-registration__code-row { margin-bottom: 18px; display: flex; align-items: stretch; gap: 10px; }
.download-registration__code-row input { flex: 1; min-width: 0; width: 0; }
.download-registration__send { flex: 0 0 138px; border: 1px solid var(--color-rule); border-radius: 8px; color: var(--color-ink); background: var(--color-paper); font: inherit; font-size: 13px; cursor: pointer; }
.download-registration__send:disabled { color: var(--color-muted); cursor: default; }
.download-registration__code-status { margin: -8px 0 18px; color: var(--color-muted); font-size: 12px; line-height: 1.7; }
@media (max-width: 520px) { .download-registration__send { flex-basis: 128px; font-size: 12px; } }

/* Works contact section; scoped to avoid changing gallery and player styles. */
.af-work-contact { margin-top: var(--space-3xl); scroll-margin-top: 96px; }
.af-work-contact__panel { display: grid; grid-template-columns: minmax(0, 1fr) 256px; align-items: center; gap: var(--space-2xl); padding: var(--space-xl) var(--space-2xl); border-radius: var(--radius-lg); background: var(--color-surface); }
.af-work-contact__copy { min-width: 0; }
.af-work-contact__copy h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.4; letter-spacing: -.035em; }
.af-work-contact__copy > p { margin-top: var(--space-sm); }
.af-work-contact__copy .button { margin-top: var(--space-lg); }
.af-work-contact__qr { margin: 0; width: 256px; max-width: 100%; text-align: center; }
.af-work-contact__qr-link { display: block; width: 224px; max-width: 100%; margin-inline: auto; border-radius: var(--radius-sm); background: var(--color-paper); }
.af-work-contact__qr img { display: block; width: 100%; height: auto; border-radius: inherit; }
.af-work-contact__qr figcaption { margin-top: var(--space-sm); font-size: var(--text-xs); line-height: 1.9; color: var(--color-muted); }
.af-work-contact__qr figcaption strong { display: block; color: var(--color-ink); font-weight: 500; }
@media (min-width: 768px) and (max-width: 1024px) {
  .af-work-contact__panel { gap: var(--space-lg); padding: var(--space-lg); }
}
@media (max-width: 767px) {
  .af-work-contact { margin-top: var(--space-xl); }
  .af-work-contact__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg) var(--space-md); text-align: center; }
  .af-work-contact__copy .af-kicker { margin-bottom: var(--space-sm); }
  .af-work-contact__copy .button { margin-top: var(--space-md); }
  .af-work-contact__qr { justify-self: center; }
}