/* Shared product navigation. Scene-specific row geometry and animated
   selectors remain in their modules so moving highlights retain their targets.
   Em units follow each illustration's existing master scale. */
.feature-scene :is(.app-side, .side) {
  --nav-on: var(--cta);
  --app-green: var(--cta);
  --app-green-bg: color-mix(in srgb, var(--cta) 10%, transparent);
}
.feature-scene .app-side {
  padding: 1em .667em;
  min-width: 0;
}
.feature-scene .demo-sidebar-logo {
  display: block; width: 9.333em; height: auto; max-width: calc(100% - 1.334em);
  flex: none; align-self: flex-start; margin: 0 .667em 1em;
}
.feature-scene .app-side .side-find {
  display: flex; align-items: center; gap: .333em;
  flex: none; margin: 0 0 1em; padding: .333em .667em;
  border: 0; border-radius: 1em; background: var(--surf);
  font-size: 1em; line-height: 1.333em; color: var(--faint);
}
.feature-scene .app-side .side-find svg { width: 1em; height: 1em; }
.feature-scene .app-side .side-nav { flex: none; gap: .667em; min-width: 0; }
.feature-scene .app-side .side-nav > .on,
.feature-scene .app-side .mk-marketing {
  background: var(--cta); color: white; border-radius: .667em;
  margin: 0; padding: .333em .667em; gap: .333em;
  font-size: 1em; line-height: 1.333em;
}
.feature-scene .app-side .side-nav .on svg { width: 1em; height: 1em; }
.feature-scene .app-side .side-nav .ghost,
.feature-scene .app-side .side-nav .gh {
  gap: .667em; padding: .333em .667em; min-width: 0;
}
.feature-scene .app-side .side-nav :is(.ghost,.gh) :is(i,b),
.feature-scene .demo-sidebar-fill :is(i,b) {
  width: .333em; height: .333em; flex: none; border-radius: 50%; background: var(--sky);
}
.feature-scene .app-side .side-nav :is(.ghost,.gh) em,
.feature-scene .demo-sidebar-fill em {
  width: var(--w,60%); max-width: calc(100% - 2.667em); height: .333em;
  min-width: 0; border-radius: .333em; background: var(--sky);
}
.feature-scene .app-side .side-nav .sub-on {
  color: var(--cta); background: color-mix(in srgb,var(--cta) 10%,transparent);
}
.feature-scene .app-side .side-user {
  flex: none; margin-top: auto; padding: 1em .667em 0; gap: .667em;
}
.feature-scene .app-side .side-user b { font-size: 1em; line-height: 1.333em; }
.feature-scene :is(.app-side,.side) .side-user img.av {
  object-fit: cover; width: 2em; height: 2em; font-size: 1em;
}
.feature-scene .demo-sidebar-fill {
  flex: 1 1 0; min-height: 0; overflow: clip; margin-top: .667em;
}
.feature-scene .demo-sidebar-fill > span {
  display: flex; align-items: center; gap: .667em; padding: .333em .667em;
  height: 1.667em; box-sizing: border-box; margin-bottom: .333em;
}
.feature-scene .demo-sidebar-fill b { margin-left: auto; }
.feature-scene .mk-sidebar .mk-marketing { margin: .667em 0; }
.feature-scene .mk-sidebar .mk-nav { margin-right: 0; }
/* Normalize the 1280px Pricing drawing to the 1100px Properties rail.
   Its internal sidebar coordinates match Properties; the main app keeps
   its own canvas and the moving pill still measures local row offsets. */
[data-scene="price"] .pw-frame { grid-template-columns:calc(200px * 1280 / 1100) minmax(0,1fr); }
[data-scene="price"] .side {
  zoom:calc(1280 / 1100); padding:12px 8px; font-size:12px; line-height:16px; min-width:0;
}
[data-scene="price"] .side .demo-sidebar-logo { width:112px; margin:0 8px 12px; }
[data-scene="price"] .side .search {
  height:24px; box-sizing:border-box; flex:none; margin:0 0 12px;
  padding:4px 8px; gap:4px; font-size:12px; line-height:16px; background:var(--surf); color:var(--faint);
}
[data-scene="price"] .side .search svg { width:12px; height:12px; }
[data-scene="price"] .side .side-nav { flex:none; display:block; }
[data-scene="price"] .side .side-nav li { height:12px; margin-bottom:8px; gap:8px; padding:4px 8px; box-sizing:border-box; }
[data-scene="price"] .side .side-nav :is([data-row-list],[data-row-chm]) { height:24px; }
[data-scene="price"] .side .side-nav li :is(i,b) { width:4px; height:4px; }
[data-scene="price"] .side .side-nav li em { height:4px; max-width:calc(100% - 32px); }
[data-scene="price"] .side .side-nav .subs { height:auto; margin:0; padding:0; }
[data-scene="price"] .side .side-nav .subs.open { margin-bottom:8px; }
[data-scene="price"] .side .side-nav .subs > div { padding-top:0; gap:4px; }
[data-scene="price"] .side .pill { height:24px; padding:4px 8px; border-radius:8px; font-size:12px; line-height:16px; box-sizing:border-box; }
[data-scene="price"] .side .pill .lab { gap:4px; min-width:0; font-size:12px; line-height:16px; padding:0; }
[data-scene="price"] .side .pill svg { width:12px; height:12px; }
[data-scene="price"] .side .sub-item { height:24px; font-size:12px; line-height:16px; padding:4px 8px; margin-left:16px; gap:8px; box-sizing:border-box; }
[data-scene="price"] .side .sub-item svg { width:12px; height:12px; }
[data-scene="price"] .side .side-user { margin-top:auto; padding:12px 8px 0; gap:8px; }
[data-scene="price"] .side .side-user b { font-size:12px; line-height:16px; }
[data-scene="price"] .side .side-user em { height:4px; width:64px; margin-top:4px; }

/* Pricing adopts the approved chapter frame and ordinary menu selection. */
:is(#f-pricing,#f-mcp) .feature-scene { padding:0; }
:is(#f-pricing,#f-mcp) .mac { width:100%; height:100%; margin:0; display:grid; grid-template-rows:32px minmax(0,1fr); border-radius:var(--r-win); overflow:hidden; background:#fff; box-shadow:0 0 0 1px #cdd4df,0 16px 40px -8px #18243b33; }
:is(#f-pricing,#f-mcp) .mac-bar { padding:8px 16px; gap:8px; background:#fff; }
:is(#f-pricing,#f-mcp) .mac-bar i { width:12px; height:12px; }
#f-pricing .mac-screen { width:100%; height:100%; min-height:0; aspect-ratio:auto; padding:0; }
#f-pricing .side .pill, #f-pricing .side .pill .lab, #f-pricing .side .side-nav .subs { transition:none; }
#f-pricing .side-nav li.tapish.hov, #f-pricing .side-nav li.tapish.hit { transform:none; }
@media(max-width:1023px) { :is(#f-pricing,#f-mcp) .mac { height:auto; grid-template-rows:auto minmax(0,1fr); } #f-pricing .mac { aspect-ratio:1100 / 640; } :is(#f-pricing,#f-mcp) .mac-bar { padding:8px; gap:4px; } :is(#f-pricing,#f-mcp) .mac-bar i { width:8px; height:8px; } }

/* Continue the same icon / label / trailing-icon rhythm through Pricing. */
#f-pricing .side .demo-sidebar-fill { margin-top:0; }
#f-pricing .side .demo-sidebar-fill > span { height:12px; margin-bottom:8px; padding:4px 8px; gap:8px; }
#f-pricing .side .demo-sidebar-fill :is(i,b) { width:4px; height:4px; }
#f-pricing .side .demo-sidebar-fill em { height:4px; max-width:calc(100% - 32px); }
#f-pricing .side .side-user { flex:none; }