/* Final visual pass, 2026-09-09. Outer controls/navigation only.
   No selectors target the locked hero, workspace stage, sprites, or timer fills.
   Inline control icons: unchanged Phosphor Regular paths; license beside this file. */

.landing .page-header:has(.final-desktop-nav) { column-gap:var(--space-6); }
.landing .final-desktop-nav { gap:var(--space-6); }
.landing .final-desktop-nav > a { white-space:nowrap; }
.landing .final-mobile-nav { display:none; }

/* Quiet, unboxed source navigation. Colour stays in the genuine app marks. */
.landing .setup-tabs { gap:var(--space-6); margin:32px auto 24px; padding:0; border:0; border-radius:0; background:transparent; }
.landing .setup-tabs > .setup-tab { position:relative; gap:var(--space-2); min-height:52px; padding:12px var(--space-2); border:0; border-radius:var(--radius-control); background:transparent; transition:color 140ms var(--ease-out); }
.landing .setup-tabs > .setup-tab::after { content:""; position:absolute; bottom:0; left:var(--space-2); right:var(--space-2); height:2px; border-radius:1px; background:var(--color-accent); transform:scaleX(0); transition:transform 160ms var(--ease-out); pointer-events:none; }
.landing .setup-tabs > .setup-tab[aria-selected="true"] { color:var(--color-text); background:transparent; box-shadow:none; }
.landing .setup-tabs > .setup-tab[aria-selected="true"]::after { transform:scaleX(1); }
.landing .setup-tabs > .setup-tab:active { transform:none; color:var(--color-accent); }
.landing .setup-tabs .final-tool-mark { display:grid; place-items:center; width:20px; height:20px; flex:none; border:0; border-radius:0; background:transparent; color:var(--color-text); }
.landing .setup-tabs .final-tool-mark > img { width:20px; height:20px; filter:none; }
.landing .setup-tabs .final-tool-mark > .final-terminal-icon { width:20px; height:20px; fill:currentColor; stroke:none; }
.landing .setup-tabs > .setup-tab[aria-selected="true"] .setup-tab-label { text-decoration:none; }
.landing .setup-tabs .setup-playback { bottom:3px; right:0; }
@media (hover:hover) and (pointer:fine) {
  .landing .setup-tabs > .setup-tab:hover { color:var(--color-text); background:transparent; }
}
@media (prefers-reduced-motion:reduce) {
  .landing .setup-tabs > .setup-tab,
  .landing .setup-tabs > .setup-tab::after { transition:none; }
}

/* Decorative pose glyphs inherit the existing selected-pose tint. */
.landing .crew-pose-options:has(.final-pose-icon) { width:min(100%,360px); }
.landing .crew-pose-options > .crew-control:has(.final-pose-icon) { gap:var(--space-2); }
.landing .crew-pose-options .final-pose-icon { width:16px; height:16px; flex:none; fill:currentColor; }

/* Display support belongs to the tools story, before the comparison. */
.landing .final-display-fit { display:grid; grid-template-columns:176px minmax(0,1fr); align-items:center; gap:var(--space-8); margin-block-start:var(--space-12); padding-block-start:var(--space-8); border-block-start:1px solid var(--color-border); }
.landing .final-display-diagram { display:block; width:176px; height:92px; }
.landing .final-display-outline { stroke:var(--color-support); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.landing .final-display-notch { fill:var(--color-bg); stroke:var(--color-control); stroke-width:1.5; }
.landing .final-display-island { fill:var(--color-accent); }
.landing .final-display-copy > h3 { margin:0; font:500 20px/1.35 var(--font-body); }
.landing .final-display-copy > p { max-width:58ch; margin-block-start:var(--space-2); color:var(--color-support); font-size:16px; line-height:1.65; }
.landing .final-display-copy > .final-display-requirement { margin-block-start:var(--space-3); font-size:14px; }
.landing .ci-comparison > .ci-footnote { font-size:14px; line-height:1.5; }

@media (max-width:1023px) {
  .landing .page-header:has(.final-desktop-nav) { grid-template-columns:1fr auto auto; gap:var(--space-4); }
  .landing .primary-nav.final-desktop-nav { display:none; }
  .landing .final-mobile-nav { display:block; position:relative; }
  .landing .final-mobile-nav > summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-height:44px; padding:var(--space-2) var(--space-3); border:1px solid var(--color-control); border-radius:var(--radius-control); font:500 14px/1.5 var(--font-body); cursor:pointer; list-style:none; }
  .landing .final-mobile-nav > summary::-webkit-details-marker { display:none; }
  .landing .final-nav-caret { width:16px; height:16px; fill:currentColor; }
  .landing .final-mobile-nav[open] .final-nav-caret { transform:rotate(180deg); }
  .landing .final-mobile-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-4); min-width:288px; padding:var(--space-4) 0; }
  .landing .final-mobile-links > a { display:flex; align-items:center; min-height:44px; padding:var(--space-2); font-size:14px; font-weight:500; text-decoration:none; }
  .landing .final-mobile-links > a:hover { text-decoration:underline; text-underline-offset:4px; }
}

@media (min-width:768px) and (max-width:1023px) {
  .landing .page-header:has(.final-mobile-nav) > .site-brand,
  .landing .page-header:has(.final-mobile-nav) > .language-link { align-self:start; min-height:44px; }
}

@media (max-width:767px) {
  .landing .page-header:has(.final-desktop-nav) { grid-template-columns:1fr auto; }
  .landing .final-mobile-nav { grid-column:1/-1; grid-row:2; }
  .landing .final-mobile-nav > summary { padding-inline:var(--space-4); }
  .landing .final-mobile-links { min-width:0; }
  .landing .final-display-fit { grid-template-columns:1fr; gap:var(--space-4); }
  .landing .final-display-copy > h3 { font-size:18px; }
}

@container (max-width:35rem) {
  .landing .setup-tabs { gap:var(--space-2); }
  .landing .setup-tabs > .setup-tab { flex-direction:column; gap:var(--space-2); min-height:76px; padding:var(--space-2) 0 var(--space-3); justify-content:flex-start; }
  .landing .setup-tabs > .setup-tab::after { left:var(--space-1); right:var(--space-1); }
}

@media (max-width:479px) {
  .landing .crew-pose-options > .crew-control:has(.final-pose-icon) { flex-direction:row; gap:var(--space-1); height:44px; padding-block:var(--space-2); }
}
@media (max-width:359px) {
  .landing .crew-pose-options > .crew-control:has(.final-pose-icon) { gap:2px; }
  .landing .crew-pose-options .final-pose-icon { width:14px; height:14px; }
}

@media (forced-colors:active) {
  .landing .setup-tabs > .setup-tab[aria-selected="true"]::after { background:Highlight; forced-color-adjust:none; }
  .landing .final-display-outline { stroke:CanvasText; }
  .landing .final-display-notch { fill:Canvas; stroke:CanvasText; }
  .landing .final-display-island { fill:CanvasText; }
  .landing .final-mobile-nav > summary { border-color:ButtonText; }
}