/* Recording-page direction, scoped to opted-in content sections only.
   Shared navigation, footer, original tokens, and app imagery are unchanged. */
.af-section {
  padding-block: var(--s8);
  overflow-wrap: break-word;
}
.af-section.af-compact { padding-block: var(--s7); }
.af-section h1 { max-width: calc(var(--measure) + var(--s12)); }
.af-section .mono { font-size: var(--type-small); line-height: var(--lh-small); }
.af-section .btn--primary { background: var(--amber); color: var(--amber-on); }
.af-section .btn--primary:hover { background: var(--ink); color: var(--paper); }
.af-section .btn { white-space: normal; text-align: center; }
.af-section a:focus-visible,
.af-section summary:focus-visible {
  outline: medium solid currentColor;
  outline-offset: var(--s1);
}
.af-section .af-actions { flex-wrap: wrap; }
.af-section .af-actions .btn { white-space: normal !important; }
.af-section .af-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--measure) / 2)), 1fr));
  gap: var(--s7);
}
.af-section .af-grid > * { min-width: 0; }
.af-section .af-grid--steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--s12)), 1fr));
  gap: var(--s6);
}
.af-section .af-display { font-size: var(--type-h2); line-height: var(--lh-h2); }
.af-section .af-media { margin-top: var(--s7); }
.af-section .af-media.shot { filter: none; }
.af-section .af-plan-divider { display: none; }
.af-section .af-plan {
  padding: var(--s6);
  background: var(--paper-raised);
  border-radius: var(--r-control);
}
.af-section .af-table { width: 100%; }
.af-section .af-table th { background: var(--paper-sunk); }
.af-section .af-table :is(th, td) { overflow-wrap: anywhere; }
.af-section .af-table tbody tr:nth-child(even) { background: var(--paper-raised); }
.af-section .af-table-wrap { overflow-x: auto; }

/* Dark demonstrations use the Console palette, including its brighter amber.
   Rebind existing text tokens so inline text colors remain legible. */
.af-section.af-dark {
  --paper: var(--console);
  --paper-raised: var(--console-bar);
  --paper-sunk: var(--console-glass);
  --ink: var(--console-label);
  --ink-secondary: var(--console-label);
  --ink-tertiary: var(--console-label);
  --amber: var(--amber-console);
  --amber-on: var(--console);
  --hairline: var(--console-label);
  background: var(--console);
  color: var(--console-label);
}
.af-dark :is(h1, h2, h3, p, li, figcaption, .lead, .small) { color: var(--console-label); }
.af-dark h2 { color: var(--amber-console); }
.af-dark .btn--primary:hover { background: var(--console-label); color: var(--console); }
.af-dark .shot { filter: none; }

/* Amber is reserved for a focused benefit or the next action. */
.af-section.af-accent {
  --ink: var(--amber-on);
  --ink-secondary: var(--amber-on);
  --ink-tertiary: var(--amber-on);
  --hairline: var(--amber-on);
  background: var(--amber);
  color: var(--amber-on);
}
.af-accent :is(h1, h2, h3, p, li, .lead, .small) { color: var(--amber-on); }
.af-accent a:not(.btn) { color: var(--amber-on); text-decoration: underline; text-underline-offset: var(--s1); }
.af-accent a:not(.btn):hover { color: var(--console); }
.af-accent .btn--primary { background: var(--console); color: var(--console-label); }
.af-accent .btn--primary:hover { background: var(--amber-on); color: var(--console); }
.af-accent .mono { color: var(--amber-on) !important; border-color: currentColor !important; }

/* Reading surfaces share the spacing and typography, with quiet backgrounds. */
.af-section.af-reference-intro { background: var(--paper-raised); }
.af-reference-intro h1 { font-size: var(--type-h2); line-height: var(--lh-h2); }
.af-section.af-reading h2 { color: var(--amber); }
.af-section.af-reading a:not(.btn) { text-decoration: underline; text-underline-offset: var(--s1); }
.af-section.af-article h1 { font-size: var(--type-h2) !important; line-height: var(--lh-h2) !important; }
.af-section.af-article article > h2 { margin-top: var(--s7) !important; }
.af-section.af-article article > .rule { background: var(--amber); }
.af-section.af-article nav {
  padding: var(--s5);
  background: var(--paper-raised);
  border-radius: var(--r-control);
}
.af-section.af-article nav a { text-decoration: none; }
.af-section.af-article nav a:hover { text-decoration: underline; }
.af-section.af-article nav a[style*="font-weight: var(--weight-medium)"] {
  color: var(--amber) !important;
}
.af-directory li { transition: background var(--dur-fade) var(--ease); }
.af-directory li:focus-within, .af-directory li:hover { background: var(--paper-raised); }
.af-directory li > .mono { color: var(--amber); }

/* Product views remain readable without JavaScript or motion. */
.product-gallery { margin-top: var(--s7); text-align: center; }
.product-gallery [hidden] { display: none !important; }
.product-gallery [data-gallery-controls] {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2);
  margin-bottom: var(--s5);
}
.product-gallery button {
  appearance: none; font: inherit; font-size: var(--type-small);
  padding: var(--s3) var(--s5); border: thin solid var(--hairline);
  border-radius: var(--r-control); color: var(--ink); background: transparent;
  cursor: pointer; transition: background var(--dur-fade) var(--ease), color var(--dur-fade) var(--ease);
}
.product-gallery button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.product-gallery button:hover { border-color: var(--ink); }
.product-gallery :focus-visible { outline: medium solid var(--amber); outline-offset: var(--s1); }
.product-gallery figure { margin: 0 !important; max-width: none !important; }
.product-gallery figure + figure { margin-top: var(--s6) !important; }
.product-gallery [role="tabpanel"] { margin-top: 0 !important; }
.product-gallery img { display: block; width: 100%; height: auto; border-radius: var(--r-control); }
.product-gallery figcaption { margin: var(--s4) auto 0; max-width: var(--measure); font-size: var(--type-small); line-height: var(--lh-small); }
.product-gallery .gallery-select { display: none; }

/* Mobile controls preserve the full navigation and source choices. */
.nav [hidden] { display: none !important; }
.nav__toggle {
  font: inherit; font-size: var(--type-small); line-height: var(--lh-small);
  color: var(--ink); background: transparent;
  padding: var(--s3) var(--s4); border: thin solid var(--hairline);
  border-radius: var(--r-control); cursor: pointer;
}
.nav :focus-visible { outline: medium solid var(--amber); outline-offset: var(--s1); }
@media (max-width: 48em) {
  .nav[data-mobile-nav] {
    height: auto; min-height: var(--nav-h); flex-wrap: wrap;
    align-items: center; row-gap: 0; padding-block: var(--s3);
  }
  .nav[data-mobile-nav] .nav__mark { flex: 0 1 auto; }
  .nav[data-mobile-nav] .nav__links {
    flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 0;
    margin-top: var(--s3); padding-block: var(--s4) var(--s2);
    border-top: thin solid var(--hairline);
  }
  .nav[data-mobile-nav] .nav__link { padding-block: var(--s3); }
  .nav[data-mobile-nav] .nav__menu { display: block; padding: 0; margin: 0; }
  .nav__feature-label { display: block; font-size: var(--type-small); color: var(--ink-tertiary); }
  .nav[data-mobile-nav] .nav__panel {
    position: static; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s5); padding: 0; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transition: none;
  }
  .nav[data-mobile-nav] .nav__panel a { padding: var(--s3) 0; }
  .nav[data-mobile-nav] .btn { margin-top: var(--s4); text-align: center; }
  .home-story .home-source-gallery { margin-top: var(--s5); }
  .product-gallery[data-compact-gallery] [data-gallery-controls] { display: none; }
  .product-gallery .gallery-select {
    display: grid; gap: var(--s2); margin-bottom: var(--s4);
    text-align: left; font-size: var(--type-small); color: var(--ink-secondary);
  }
  .gallery-select select {
    width: 100%; min-width: 0; font: inherit; line-height: var(--lh-small);
    padding: var(--s3); color: var(--ink); background: var(--paper);
    border: thin solid var(--hairline); border-radius: var(--r-control);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .product-gallery [role="tabpanel"]:not([hidden]) { animation: product-view-in var(--dur-fade) var(--ease); }
  @keyframes product-view-in { from { opacity: 0.6; } to { opacity: 1; } }
  @supports (animation-timeline: view()) {
    .af-section:not(:first-child) > .wrap, .recording-story section:not(:first-child) > .wrap {
      animation: section-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes section-in { from { opacity: 0.85; transform: translateY(var(--s3)); } to { opacity: 1; transform: none; } }
  }
}

/* Two-column fact tables (press facts, security, shortcuts) borrow .tier-table's
   header and rules, but not its centred fixed-width tier columns, which squeezed
   the value column into a strip on phones. Comparison tables keep theirs. */
.af-table.tier-table:not(.comparison-table) { display: table; }
.af-table.tier-table:not(.comparison-table) :is(th, td) { width: auto; text-align: left; }
.af-table.tier-table:not(.comparison-table) :is(th, td):first-child { width: 30%; overflow-wrap: normal; }